Require challengeOptions to be passed explicitly rather than spread (…

…#14)

README.md

@@ -1,4 +1,8 @@
-🚧 Work in progress: Not intended for production use. 🚧 
+# Authsignal React SDK
+
+React components for [Authsignal](https://authsignal.com).
+
+[Documentation](https://docs.authsignal.com/sdks/client/react)
 
 ## Installation
 Add `@authsignal/react` to your `package.json` dependencies.
@@ -50,7 +54,7 @@ export function Checkout() {
 
     if (data.challengeOptions) {
        startChallenge({
-        ...challengeOptions,
+          challengeOptions: data.challengeOptions,
           onChallengeSuccess: ({ token }) => {
             // Challenge was successful
           },
@@ -81,7 +85,6 @@ export function Checkout() {
   const { startChallengeAsync } = useAuthsignal();
 
   const handlePayment = async () => {
-    setIsLoading(true);
 
     const response = await fetch('/api/payment', {
       method: 'POST',
@@ -95,7 +98,7 @@ export function Checkout() {
     if (data.challengeOptions) {
       try {
         const { token } = await startChallengeAsync({
-          ...challengeOptions,
+          challengeOptions: data.challengeOptions,
         });
 
         // Challenge was successful
@@ -109,8 +112,6 @@ export function Checkout() {
         }
       }
     }
-
-    setIsLoading(false);
   };
 
   return (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authsignal/react",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "",
   "keywords": [
     "authsignal",
@@ -33,6 +33,7 @@
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
+    "clsx": "^2.1.1",
     "input-otp": "^1.2.4",
     "react-hook-form": "^7.53.0",
     "tailwind-merge": "^2.5.2",

src/components/challenge/challenge.tsx

@@ -24,12 +24,15 @@ import {
 import { createTheme } from "../../lib/create-theme";
 
 export function Challenge({
-  defaultVerificationMethod,
   onChallengeSuccess,
   onCancel,
-  token,
-  user,
-  verificationMethods,
+  challengeOptions: {
+    token,
+    user,
+    verificationMethods,
+    defaultVerificationMethod,
+  },
+
   onTokenExpired,
 }: ChallengeProps) {
   const [open, setOpen] = React.useState(false);

src/components/challenge/use-challenge-context.tsx

@@ -1,16 +1,18 @@
 import { Authsignal } from "@authsignal/browser";
 import React from "react";
-import { ChallengeProps, TVerificationMethod } from "../../types";
+import { ChallengeOptions, TVerificationMethod } from "../../types";
 
 type ChallengeState = {
   isDesktop: boolean;
   verificationMethod?: TVerificationMethod;
+  verificationMethods?: ChallengeOptions["verificationMethods"];
+  user?: ChallengeOptions["user"];
   setVerificationMethod: React.Dispatch<
     React.SetStateAction<TVerificationMethod | undefined>
   >;
   handleChallengeSuccess: (params: { token: string }) => void;
   authsignal: Authsignal;
-} & Pick<ChallengeProps, "user" | "verificationMethods">;
+};
 
 export const ChallengeContext = React.createContext<ChallengeState | undefined>(
   undefined,

src/index.ts

@@ -2,4 +2,4 @@ import "./main.css";
 
 export { Authsignal } from "./authsignal";
 export { useAuthsignal, ChallengeError } from "./use-authsignal";
-export { Appearance, AuthsignalProps } from "./types";
+export { Appearance, AuthsignalProps, ChallengeOptions } from "./types";

src/types.ts

@@ -37,11 +37,8 @@ export const VerificationMethod = {
 export type TVerificationMethod =
   (typeof VerificationMethod)[keyof typeof VerificationMethod];
 
-export type ChallengeProps = {
+export type ChallengeOptions = {
   token: string;
-  onChallengeSuccess?: (params: { token: string }) => void;
-  onCancel?: () => void;
-  onTokenExpired?: () => void;
   defaultVerificationMethod?: TVerificationMethod;
   verificationMethods?: TVerificationMethod[];
   user?: {
@@ -50,9 +47,13 @@ export type ChallengeProps = {
   };
 };
 
+export type ChallengeProps = {
+  challengeOptions: ChallengeOptions;
+  onChallengeSuccess?: (params: { token: string }) => void;
+  onCancel?: () => void;
+  onTokenExpired?: () => void;
+};
+
 export type StartChallengeOptions = ChallengeProps;
 
-export type StartChallengeAsyncOptions = Omit<
-  ChallengeProps,
-  "onChallengeSuccess" | "onTokenExpired" | "onCancel"
->;
+export type StartChallengeAsyncOptions = { challengeOptions: ChallengeOptions };

yarn.lock

@@ -1203,6 +1203,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@@ -3446,7 +3451,16 @@ string-hash@^1.1.1:
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
   integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3884,7 +3898,16 @@ word-wrap@^1.2.5:
   resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==