diff --git a/apps/demo-pkp-social-auth-next-ts/package.json b/apps/demo-pkp-social-auth-next-ts/package.json index 36dcece12..bac4aea92 100644 --- a/apps/demo-pkp-social-auth-next-ts/package.json +++ b/apps/demo-pkp-social-auth-next-ts/package.json @@ -9,26 +9,29 @@ "lint": "next lint" }, "dependencies": { - "@lit-protocol/auth-helpers": "file:../../packages/auth-helpers", - "@lit-protocol/constants": "file:../../packages/constants", - "@lit-protocol/lit-auth-client": "file:../../packages/lit-auth-client", - "@lit-protocol/pkp-ethers": "file:../../packages/pkp-ethers", - "@lit-protocol/types": "file:../../packages/types", + "@lit-protocol/auth-helpers": "^3.0.6", + "@lit-protocol/constants": "^3.0.6", + "@lit-protocol/lit-auth-client": "^3.0.6", + "@lit-protocol/pkp-ethers": "^3.0.6", + "@lit-protocol/types": "^3.0.6", "@radix-ui/react-radio-group": "^1.1.3", - "@stytch/nextjs": "^9.0.0", + "@stytch/nextjs": "^11.0.0", + "@stytch/vanilla-js": "^2.2.0", + "dotenv": "^16.3.1", "eslint": "8.36.0", - "eslint-config-next": "13.2.4", + "eslint-config-next": "^13.5.4", "eslint-config-prettier": "^8.8.0", "ethers": "^5", - "next": "13.2.4", + "next": "^13.5.4", "prettier": "^2.8.7", - "react": "18.2.0", - "react-dom": "18.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "wagmi": "^0.12.8" }, "devDependencies": { "@types/node": "18.15.11", "@types/react": "18.0.31", - "sass": "^1.64.2" + "sass": "^1.64.2", + "typescript": "5.2.2" } } diff --git a/apps/demo-pkp-social-auth-next-ts/src/components/EmailSMSAuth.tsx b/apps/demo-pkp-social-auth-next-ts/src/components/EmailSMSAuth.tsx deleted file mode 100644 index 5e505d1ff..000000000 --- a/apps/demo-pkp-social-auth-next-ts/src/components/EmailSMSAuth.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { useState } from 'react'; - -import { sendOTPCode } from '../utils/lit'; - -type OtpMethod = 'email' | 'phone'; -type OtpStep = 'submit' | 'verify'; - -interface EmailSMSAuthProps { - method: OtpMethod; - setView: React.Dispatch>; - authWithOTP: any; -} - -const EmailSMSAuth = ({ method, setView, authWithOTP }: EmailSMSAuthProps) => { - const [step, setStep] = useState('submit'); - const [userId, setUserId] = useState(''); - const [code, setCode] = useState(''); - const [sendLoading, setSendLoading] = useState(false); - const [sendError, setSendError] = useState(); - - async function handleSendCode(event: any) { - event.preventDefault(); - setSendLoading(true); - setSendError(undefined); - try { - await sendOTPCode(userId); - setStep('verify'); - } catch (err) { - setSendError(err); - } finally { - setSendLoading(false); - } - } - - async function handleAuth(event: any) { - event.preventDefault(); - setSendLoading(false); - setSendError(undefined); - await authWithOTP(code); - } - - return ( - <> - {step === 'submit' && ( - <> - {sendError && ( -
-

{sendError.message}

-
- )} -

Enter your {method}

-

A verification code will be sent to your {method}.

-
-
- - setUserId(e.target.value)} - type={method === 'email' ? 'email' : 'tel'} - name={method} - className="form__input" - placeholder={ - method === 'email' ? 'Your email' : 'Your phone number' - } - autoComplete="off" - > - - -
-
- - )} - {step === 'verify' && ( - <> -

Check your {method}

-

Enter the 6-digit verification code to {userId}

-
-
- - setCode(e.target.value)} - type="code" - name="code" - className="form__input" - placeholder="Verification code" - autoComplete="off" - > - - -
-
- - )} - - ); -}; - -export default EmailSMSAuth; diff --git a/apps/demo-pkp-social-auth-next-ts/src/components/LoginMethods.tsx b/apps/demo-pkp-social-auth-next-ts/src/components/LoginMethods.tsx index 35e11694a..86e68cb66 100644 --- a/apps/demo-pkp-social-auth-next-ts/src/components/LoginMethods.tsx +++ b/apps/demo-pkp-social-auth-next-ts/src/components/LoginMethods.tsx @@ -1,7 +1,6 @@ import { useState } from 'react'; import AuthMethods from './AuthMethods'; -import EmailSMSAuth from './EmailSMSAuth'; import WalletMethods from './WalletMethods'; import WebAuthn from './WebAuthn'; import StytchOTP from './StytchOTP'; @@ -10,7 +9,6 @@ interface LoginProps { handleGoogleLogin: () => Promise; handleDiscordLogin: () => Promise; authWithEthWallet: any; - authWithOTP: any; authWithWebAuthn: any; authWithStytch: any; signUp: any; @@ -23,7 +21,6 @@ export default function LoginMethods({ handleGoogleLogin, handleDiscordLogin, authWithEthWallet, - authWithOTP, authWithWebAuthn, authWithStytch, signUp, @@ -55,13 +52,6 @@ export default function LoginMethods({ )} - {view === 'email' && ( - - )} {/* {view === 'phone' && ( Promise; handleDiscordLogin: () => Promise; authWithEthWallet: any; - authWithOTP: any; registerWithWebAuthn: any; authWithWebAuthn: any; authWithStytch: any; @@ -24,7 +22,6 @@ export default function SignUpMethods({ handleGoogleLogin, handleDiscordLogin, authWithEthWallet, - authWithOTP, registerWithWebAuthn, authWithWebAuthn, authWithStytch, @@ -65,13 +62,6 @@ export default function SignUpMethods({ )} - {view === 'email' && ( - - )} {/* {view === 'phone' && ( => { - setLoading(true); - setError(undefined); - setAuthMethod(undefined); - - try { - const result: AuthMethod = (await authenticateWithOTP(code)) as any; - setAuthMethod(result); - } catch (err) { - setError(err); - } finally { - setLoading(false); - } - }, []); - /** * Authenticate with Stytch */ @@ -177,7 +158,6 @@ export default function useAuthenticate(redirectUri?: string) { return { authWithEthWallet, authWithWebAuthn, - authWithOTP, authWithStytch, authMethod, loading, diff --git a/apps/demo-pkp-social-auth-next-ts/src/pages/index.tsx b/apps/demo-pkp-social-auth-next-ts/src/pages/index.tsx index 62afe0f1f..347e39f00 100644 --- a/apps/demo-pkp-social-auth-next-ts/src/pages/index.tsx +++ b/apps/demo-pkp-social-auth-next-ts/src/pages/index.tsx @@ -20,7 +20,6 @@ export default function SignUpView() { const { authMethod, authWithEthWallet, - authWithOTP, authWithWebAuthn, authWithStytch, loading: authLoading, @@ -98,7 +97,6 @@ export default function SignUpView() { handleGoogleLogin={handleGoogleLogin} handleDiscordLogin={handleDiscordLogin} authWithEthWallet={authWithEthWallet} - authWithOTP={authWithOTP} registerWithWebAuthn={registerWithWebAuthn} authWithWebAuthn={authWithWebAuthn} authWithStytch={authWithStytch} diff --git a/apps/demo-pkp-social-auth-next-ts/src/pages/login.tsx b/apps/demo-pkp-social-auth-next-ts/src/pages/login.tsx index acb7ea5b1..fed62b847 100644 --- a/apps/demo-pkp-social-auth-next-ts/src/pages/login.tsx +++ b/apps/demo-pkp-social-auth-next-ts/src/pages/login.tsx @@ -16,7 +16,6 @@ export default function LoginView() { const { authMethod, authWithEthWallet, - authWithOTP, authWithWebAuthn, authWithStytch, loading: authLoading, @@ -130,7 +129,6 @@ export default function LoginView() { handleGoogleLogin={handleGoogleLogin} handleDiscordLogin={handleDiscordLogin} authWithEthWallet={authWithEthWallet} - authWithOTP={authWithOTP} authWithWebAuthn={authWithWebAuthn} authWithStytch={authWithStytch} signUp={goToSignUp} diff --git a/apps/demo-pkp-social-auth-next-ts/src/utils/lit.ts b/apps/demo-pkp-social-auth-next-ts/src/utils/lit.ts index 825180e76..d97c64cb4 100644 --- a/apps/demo-pkp-social-auth-next-ts/src/utils/lit.ts +++ b/apps/demo-pkp-social-auth-next-ts/src/utils/lit.ts @@ -4,7 +4,6 @@ import { EthWalletProvider, WebAuthnProvider, LitAuthClient, - OtpProvider, } from '@lit-protocol/lit-auth-client'; import { LitNodeClient } from '@lit-protocol/lit-node-client'; import { AuthMethodType, ProviderType } from '@lit-protocol/constants'; @@ -13,7 +12,6 @@ import { AuthMethod, GetSessionSigsProps, IRelayPKP, - ProviderOptions, SessionSigs, } from '@lit-protocol/types'; @@ -34,12 +32,6 @@ export const litAuthClient: LitAuthClient = new LitAuthClient({ // relayUrl: 'http://localhost:3001', relayApiKey: 'test-api-key', }, - litOtpConfig: { - baseUrl: 'https://auth-api.litgateway.com', - port: '443', - startRoute: '/api/otp/start', - checkRoute: '/api/otp/check', - }, litNodeClient, }); @@ -161,31 +153,6 @@ export async function authenticateWithWebAuthn(): Promise< return authMethod; } -/** - * Send OTP code to user - */ -export async function sendOTPCode(emailOrPhone: string) { - const otpProvider = litAuthClient.initProvider( - ProviderType.Otp, - { - userId: emailOrPhone, - } as unknown as ProviderOptions - ); - const status = await otpProvider.sendOtpCode(); - return status; -} - -/** - * Get auth method object by validating the OTP code - */ -export async function authenticateWithOTP( - code: string -): Promise { - const otpProvider = litAuthClient.getProvider(ProviderType.Otp); - const authMethod = await otpProvider?.authenticate({ code }); - return authMethod; -} - /** * Get auth method object by validating Stytch JWT */ @@ -309,8 +276,6 @@ function getProviderByAuthMethod(authMethod: AuthMethod) { return litAuthClient.getProvider(ProviderType.EthWallet); case AuthMethodType.WebAuthn: return litAuthClient.getProvider(ProviderType.WebAuthn); - case AuthMethodType.OTP: - return litAuthClient.getProvider(ProviderType.Otp); case AuthMethodType.StytchOtp: return litAuthClient.getProvider(ProviderType.StytchOtp); default: