Update PKP social auth project to be on cayenne (#233)

* Update project to be on cayenne
LIT-Protocol · Oct 19, 2023 · cb89c85 · cb89c85
1 parent 09db37c
commit cb89c85
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 213 deletions.
diff --git 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
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
@@ -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<void>;
   handleDiscordLogin: () => Promise<void>;
   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({
             </div>
           </>
         )}
-        {view === 'email' && (
-          <EmailSMSAuth
-            method={'email'}
-            setView={setView}
-            authWithOTP={authWithOTP}
-          />
-        )}
         {/* {view === 'phone' && (
           <EmailSMSAuth
             method={'phone'}

diff --git a/apps/demo-pkp-social-auth-next-ts/src/components/SignUpMethods.tsx b/apps/demo-pkp-social-auth-next-ts/src/components/SignUpMethods.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 SignUpProps {
   handleGoogleLogin: () => Promise<void>;
   handleDiscordLogin: () => Promise<void>;
   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({
             </div>
           </>
         )}
-        {view === 'email' && (
-          <EmailSMSAuth
-            method={'email'}
-            setView={setView}
-            authWithOTP={authWithOTP}
-          />
-        )}
         {/* {view === 'phone' && (
           <EmailSMSAuth
             method={'phone'}

diff --git a/apps/demo-pkp-social-auth-next-ts/src/hooks/useAuthenticate.ts b/apps/demo-pkp-social-auth-next-ts/src/hooks/useAuthenticate.ts
@@ -9,7 +9,6 @@ import {
   authenticateWithDiscord,
   authenticateWithEthWallet,
   authenticateWithWebAuthn,
-  authenticateWithOTP,
   authenticateWithStytch,
 } from '../utils/lit';
 import { useConnect } from 'wagmi';
@@ -119,24 +118,6 @@ export default function useAuthenticate(redirectUri?: string) {
     []
   );
 
-  /**
-   * Authenticate with OTP
-   */
-  const authWithOTP = useCallback(async (code: string): Promise<void> => {
-    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
@@ -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
@@ -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
@@ -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<OtpProvider>(
-    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<AuthMethod | undefined> {
-  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: