Update to with-supertokens example (vercel#66320)

Updates to using latest supertokens' SDK versions. Co-authored-by: Sam Ko <[email protected]>
enchorb · May 29, 2024 · 4fbf3d3 · 4fbf3d3
1 parent 3d2494a
commit 4fbf3d3
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 62 deletions.
diff --git a/examples/with-supertokens/app/components/home.tsx b/examples/with-supertokens/app/components/home.tsx
@@ -60,7 +60,8 @@ export async function HomePage() {
     if (hasInvalidClaims) {
       return <SessionAuthForNextJS />;
     } else {
-      return <TryRefreshComponent />;
+      // To learn about why the 'key' attribute is required refer to: https://github.com/supertokens/supertokens-node/issues/826#issuecomment-2092144048
+      return <TryRefreshComponent key={Date.now()} />;
     }
   }
 

diff --git a/examples/with-supertokens/app/config/backend.ts b/examples/with-supertokens/app/config/backend.ts
@@ -1,4 +1,5 @@
-import ThirdPartyEmailPasswordNode from "supertokens-node/recipe/thirdpartyemailpassword";
+import ThirdPartyNode from "supertokens-node/recipe/thirdparty";
+import EmailPasswordNode from "supertokens-node/recipe/emailpassword";
 import SessionNode from "supertokens-node/recipe/session";
 import Dashboard from "supertokens-node/recipe/dashboard";
 import UserRoles from "supertokens-node/recipe/userroles";
@@ -16,62 +17,65 @@ export let backendConfig = (): TypeInput => {
     // recipeList contains all the modules that you want to
     // use from SuperTokens. See the full list here: https://supertokens.com/docs/guides
     recipeList: [
-      ThirdPartyEmailPasswordNode.init({
-        providers: [
-          // We have provided you with development keys which you can use for testing.
-          // IMPORTANT: Please replace them with your own OAuth keys for production use.
-          {
-            config: {
-              thirdPartyId: "google",
-              clients: [
-                {
-                  clientId:
-                    "1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com",
-                  clientSecret: "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",
-                },
-              ],
+      EmailPasswordNode.init(),
+      ThirdPartyNode.init({
+        signInAndUpFeature: {
+          providers: [
+            // We have provided you with development keys which you can use for testing.
+            // IMPORTANT: Please replace them with your own OAuth keys for production use.
+            {
+              config: {
+                thirdPartyId: "google",
+                clients: [
+                  {
+                    clientId:
+                      "1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com",
+                    clientSecret: "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",
+                  },
+                ],
+              },
             },
-          },
-          {
-            config: {
-              thirdPartyId: "github",
-              clients: [
-                {
-                  clientId: "467101b197249757c71f",
-                  clientSecret: "e97051221f4b6426e8fe8d51486396703012f5bd",
-                },
-              ],
+            {
+              config: {
+                thirdPartyId: "github",
+                clients: [
+                  {
+                    clientId: "467101b197249757c71f",
+                    clientSecret: "e97051221f4b6426e8fe8d51486396703012f5bd",
+                  },
+                ],
+              },
             },
-          },
-          {
-            config: {
-              thirdPartyId: "apple",
-              clients: [
-                {
-                  clientId: "4398792-io.supertokens.example.service",
-                  additionalConfig: {
-                    keyId: "7M48Y4RYDL",
-                    privateKey:
-                      "-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----",
-                    teamId: "YWQCXGJRJL",
+            {
+              config: {
+                thirdPartyId: "apple",
+                clients: [
+                  {
+                    clientId: "4398792-io.supertokens.example.service",
+                    additionalConfig: {
+                      keyId: "7M48Y4RYDL",
+                      privateKey:
+                        "-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----",
+                      teamId: "YWQCXGJRJL",
+                    },
                   },
-                },
-              ],
+                ],
+              },
             },
-          },
-          {
-            config: {
-              thirdPartyId: "twitter",
-              clients: [
-                {
-                  clientId: "4398792-WXpqVXRiazdRMGNJdEZIa3RVQXc6MTpjaQ",
-                  clientSecret:
-                    "BivMbtwmcygbRLNQ0zk45yxvW246tnYnTFFq-LH39NwZMxFpdC",
-                },
-              ],
+            {
+              config: {
+                thirdPartyId: "twitter",
+                clients: [
+                  {
+                    clientId: "4398792-WXpqVXRiazdRMGNJdEZIa3RVQXc6MTpjaQ",
+                    clientSecret:
+                      "BivMbtwmcygbRLNQ0zk45yxvW246tnYnTFFq-LH39NwZMxFpdC",
+                  },
+                ],
+              },
             },
-          },
-        ],
+          ],
+        },
       }),
       SessionNode.init(),
       Dashboard.init(),

diff --git a/examples/with-supertokens/app/config/frontend.tsx b/examples/with-supertokens/app/config/frontend.tsx
@@ -1,9 +1,11 @@
-import ThirdPartyEmailPasswordReact from "supertokens-auth-react/recipe/thirdpartyemailpassword";
+import ThirdPartyReact from "supertokens-auth-react/recipe/thirdparty";
+import EmailPasswordReact from "supertokens-auth-react/recipe/emailpassword";
 import Session from "supertokens-auth-react/recipe/session";
 import { appInfo } from "./appInfo";
 import { useRouter } from "next/navigation";
 import { SuperTokensConfig } from "supertokens-auth-react/lib/build/types";
-import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
+import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
+import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
 
 const routerInfo: { router?: ReturnType<typeof useRouter>; pathName?: string } =
   {};
@@ -20,12 +22,13 @@ export const frontendConfig = (): SuperTokensConfig => {
   return {
     appInfo,
     recipeList: [
-      ThirdPartyEmailPasswordReact.init({
+      EmailPasswordReact.init(),
+      ThirdPartyReact.init({
         signInAndUpFeature: {
           providers: [
-            ThirdPartyEmailPasswordReact.Google.init(),
-            ThirdPartyEmailPasswordReact.Github.init(),
-            ThirdPartyEmailPasswordReact.Apple.init(),
+            ThirdPartyReact.Google.init(),
+            ThirdPartyReact.Github.init(),
+            ThirdPartyReact.Apple.init(),
           ],
         },
       }),
@@ -49,4 +52,4 @@ export const recipeDetails = {
   docsLink: "https://supertokens.com/docs/thirdpartyemailpassword/introduction",
 };
 
-export const PreBuiltUIList = [ThirdPartyEmailPasswordPreBuiltUI];
+export const PreBuiltUIList = [ThirdPartyPreBuiltUI, EmailPasswordPreBuiltUI];
diff --git a/examples/with-supertokens/package.json b/examples/with-supertokens/package.json
@@ -20,8 +20,6 @@
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "13.5.4",
-    "i": "^0.3.7",
-    "npm": "^10.2.0",
     "typescript": "^5"
   }
 }