Update to with-supertokens example app

examples/with-supertokens/config/backendConfig.ts

@@ -20,22 +20,43 @@ export let backendConfig = (): AuthConfig => {
         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.
-          ThirdPartyEmailPasswordNode.Google({
-            clientId: process.env.GOOGLE_CLIENT_ID,
-            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
-          }),
-          ThirdPartyEmailPasswordNode.Github({
-            clientId: process.env.GITHUB_CLIENT_ID,
-            clientSecret: process.env.GITHUB_CLIENT_SECRET,
-          }),
-          ThirdPartyEmailPasswordNode.Apple({
-            clientId: process.env.APPLE_CLIENT_ID,
-            clientSecret: {
-              keyId: process.env.APPLE_KEY_ID,
-              privateKey: process.env.APPLE_PRIVATE_KEY.replace(/\\n/g, '\n'),
-              teamId: process.env.APPLE_TEAM_ID,
+          {
+            config: {
+              thirdPartyId: "google",
+              clients: [
+                {
+                  clientId: process.env.GOOGLE_CLIENT_ID,
+                  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+                },
+              ],
             },
-          }),
+          },
+          {
+            config: {
+              thirdPartyId: "github",
+              clients: [
+                {
+                  clientId: process.env.GITHUB_CLIENT_ID,
+                  clientSecret: process.env.GITHUB_CLIENT_SECRET,
+                },
+              ],
+            },
+          },
+          {
+            config: {
+              thirdPartyId: "apple",
+              clients: [
+                {
+                  clientId: process.env.APPLE_CLIENT_ID,
+                  additionalConfig: {
+                    keyId: process.env.APPLE_KEY_ID,
+                    privateKey: process.env.APPLE_PRIVATE_KEY.replace(/\\n/g, "\n"),
+                    teamId: process.env.APPLE_TEAM_ID,
+                  },
+                },
+              ],
+            },
+          },
         ],
       }),
       SessionNode.init(),

examples/with-supertokens/pages/auth/[[...path]].tsx

@@ -1,17 +1,17 @@
 import Head from 'next/head'
-import React, { useEffect } from 'react'
+import React, { ComponentType, useEffect } from 'react'
 import styles from '../../styles/Home.module.css'
 import dynamic from 'next/dynamic'
-import SuperTokens from 'supertokens-auth-react'
+import { canHandleRoute, getRoutingComponent } from 'supertokens-auth-react/ui'
 import { redirectToAuth } from 'supertokens-auth-react'
+import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
+import { EmailVerificationPreBuiltUI } from "supertokens-auth-react/recipe/emailverification/prebuiltui";
 
-const SuperTokensComponentNoSSR = dynamic<
-  React.ComponentProps<typeof SuperTokens.getRoutingComponent>
->(new Promise((res) => res(SuperTokens.getRoutingComponent)), { ssr: false })
+const SuperTokensComponentNoSSR = dynamic<{}>(new Promise((res) => res(() => getRoutingComponent([ThirdPartyEmailPasswordPreBuiltUI, EmailVerificationPreBuiltUI]))), { ssr: false })
 
 export default function Auth(): JSX.Element {
   useEffect(() => {
-    if (SuperTokens.canHandleRoute() === false) {
+    if (canHandleRoute([ThirdPartyEmailPasswordPreBuiltUI, EmailVerificationPreBuiltUI]) === false) {
       redirectToAuth({
         redirectBack: false,
       })

examples/with-supertokens/pages/index.tsx

@@ -70,13 +70,9 @@ function ProtectedPage({ userId }) {
         <p className={styles.description}>
           You are authenticated with SuperTokens!
         </p>
-
         <p className={styles.description}>
           UserId: {session.userId} <br /> (from SSR: {userId})
         </p>
-        <p className={styles.description}>
-          Access token payload: {JSON.stringify(session.accessTokenPayload)}
-        </p>
         <div
           style={{
             display: 'flex',
@@ -134,6 +130,13 @@ function ProtectedPage({ userId }) {
           </div>
         </div>
 
+        <p className={styles.description}>
+          Access token payload:
+          <pre className={styles.code}>
+            {JSON.stringify(session.accessTokenPayload, null, 2)}
+          </pre>
+        </p>
+
         <div className={styles.grid}>
           <a href="https://nextjs.org/docs" className={styles.card}>
             <h3>Documentation &rarr;</h3>

examples/with-supertokens/styles/Home.module.css

@@ -14,6 +14,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  max-width: 100vw;
 }
 
 .footer {
@@ -69,6 +70,7 @@
   font-size: 1.1rem;
   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
     Bitstream Vera Sans Mono, Courier New, monospace;
+  text-align: left;
 }
 
 .grid {