@zoreal/oauth2-react 0.2.7 → 0.2.8

package/dist/index.d.cts

@@ -71,10 +71,13 @@ interface ZorealButtonConfiguration {
     theme?: 'outline' | 'filled' | 'filled_black';
     size?: 'large' | 'medium' | 'small';
     /**
-     * All four are neutral. The button asserts nothing about a person who has not yet
-     * authenticated; there is no 'verified_human' variant.
+     * All five are neutral. The button asserts nothing about a person who has
+     * not yet authenticated; there is no 'verified_human' variant. 'verify_with'
+     * stays inside that rule: it names the act the button starts, not a state
+     * the person already holds — built for surfaces where the login IS a check
+     * (ZOREAL Meet's presence request), not a sign-in.
      */
-    text?: 'continue_with' | 'signin_with' | 'signup_with' | 'signin';
+    text?: 'continue_with' | 'signin_with' | 'signup_with' | 'signin' | 'verify_with';
     shape?: 'rectangular' | 'pill' | 'square';
     logo_alignment?: 'left' | 'center';
     width?: string | number;
@@ -126,8 +129,21 @@ interface AuthCodeFlowOptions extends ZorealLoginRequestOptions {
     redirect_uri?: string;
     ux_mode?: 'popup' | 'redirect';
 }
-type ZorealLoginProps = {
+/**
+ * The button runs either flow, discriminated on `flow` exactly as
+ * useZorealLogin is: browser-direct (the default) hands onSuccess an ID
+ * token; auth-code hands it the code, PKCE verifier and nonce for YOUR
+ * backend to redeem. Added in 0.2.8 — before that the button was
+ * browser-direct only and auth-code integrations had to rebuild the button
+ * around the hook to get the same pixels.
+ */
+type ZorealLoginProps = ({
+    flow?: 'browser-direct';
     onSuccess: (response: ZorealCredentialResponse) => void;
+} | {
+    flow: 'auth-code';
+    onSuccess: (response: ZorealCodeResponse) => void;
+}) & {
     onError?: (error: NonOAuthError) => void;
     containerProps?: React.ComponentPropsWithoutRef<'div'>;
 } & ZorealLoginRequestOptions & ZorealButtonConfiguration;

package/dist/index.d.ts

@@ -71,10 +71,13 @@ interface ZorealButtonConfiguration {
     theme?: 'outline' | 'filled' | 'filled_black';
     size?: 'large' | 'medium' | 'small';
     /**
-     * All four are neutral. The button asserts nothing about a person who has not yet
-     * authenticated; there is no 'verified_human' variant.
+     * All five are neutral. The button asserts nothing about a person who has
+     * not yet authenticated; there is no 'verified_human' variant. 'verify_with'
+     * stays inside that rule: it names the act the button starts, not a state
+     * the person already holds — built for surfaces where the login IS a check
+     * (ZOREAL Meet's presence request), not a sign-in.
      */
-    text?: 'continue_with' | 'signin_with' | 'signup_with' | 'signin';
+    text?: 'continue_with' | 'signin_with' | 'signup_with' | 'signin' | 'verify_with';
     shape?: 'rectangular' | 'pill' | 'square';
     logo_alignment?: 'left' | 'center';
     width?: string | number;
@@ -126,8 +129,21 @@ interface AuthCodeFlowOptions extends ZorealLoginRequestOptions {
     redirect_uri?: string;
     ux_mode?: 'popup' | 'redirect';
 }
-type ZorealLoginProps = {
+/**
+ * The button runs either flow, discriminated on `flow` exactly as
+ * useZorealLogin is: browser-direct (the default) hands onSuccess an ID
+ * token; auth-code hands it the code, PKCE verifier and nonce for YOUR
+ * backend to redeem. Added in 0.2.8 — before that the button was
+ * browser-direct only and auth-code integrations had to rebuild the button
+ * around the hook to get the same pixels.
+ */
+type ZorealLoginProps = ({
+    flow?: 'browser-direct';
     onSuccess: (response: ZorealCredentialResponse) => void;
+} | {
+    flow: 'auth-code';
+    onSuccess: (response: ZorealCodeResponse) => void;
+}) & {
     onError?: (error: NonOAuthError) => void;
     containerProps?: React.ComponentPropsWithoutRef<'div'>;
 } & ZorealLoginRequestOptions & ZorealButtonConfiguration;

package/dist/index.js

@@ -5,7 +5,7 @@ import { createContext, useContext, useMemo, useState as useState2 } from "react
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.2.7";
+var SDK_VERSION = "0.2.8";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
 var POLL_INTERVAL_ENROLLING_MS = 5e3;
@@ -1555,7 +1555,8 @@ var TEXTS = {
   continue_with: "Continue with ZOREAL",
   signin_with: "Sign in with ZOREAL",
   signup_with: "Sign up with ZOREAL",
-  signin: "Sign in"
+  signin: "Sign in",
+  verify_with: "Verify with ZOREAL ID"
 };
 var SIZES = {
   large: { height: 44, font: 15, pad: 20 },
@@ -1575,12 +1576,14 @@ function ZorealLogin(props) {
     logo_alignment = "left",
     width,
     click_listener,
+    flow = "browser-direct",
     ...request
   } = props;
   const { login } = useZorealFlow({
     ...request,
-    flow: "browser-direct",
-    onCredential: onSuccess,
+    flow,
+    onCredential: flow === "browser-direct" ? onSuccess : void 0,
+    onCode: flow === "auth-code" ? onSuccess : void 0,
     onError: (e) => onError?.({ type: "unknown", description: e.description ?? e.error }),
     onNonOAuthError: (e) => onError?.(e)
   });