Updates with-supertokens example app (#40707)

- Updates supertokens-node and supertokens-auth-react dependencies.
- Uses separate Email verification recipe instead of using it inside the
ThirdPartyEmailPassword recipe (as per the update)
- Uses <SessionAuth> guard instead of <ThirdPartyEmailPassword> guard
(as per the lib update)

examples/with-supertokens/config/backendConfig.ts

@@ -1,4 +1,5 @@
 import ThirdPartyEmailPasswordNode from 'supertokens-node/recipe/thirdpartyemailpassword'
+import EmailVerificationNode from 'supertokens-node/recipe/emailverification'
 import SessionNode from 'supertokens-node/recipe/session'
 import { appInfo } from './appInfo'
 import { AuthConfig } from '../interfaces'
@@ -11,6 +12,9 @@ export let backendConfig = (): AuthConfig => {
     },
     appInfo,
     recipeList: [
+      EmailVerificationNode.init({
+        mode: 'REQUIRED',
+      }),
       ThirdPartyEmailPasswordNode.init({
         providers: [
           // We have provided you with development keys which you can use for testing.

examples/with-supertokens/config/frontendConfig.ts

@@ -1,4 +1,5 @@
 import ThirdPartyEmailPasswordReact from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
+import EmailVerificationReact from 'supertokens-auth-react/recipe/emailverification'
 import SessionReact from 'supertokens-auth-react/recipe/session'
 import { appInfo } from './appInfo'
 import Router from 'next/router'
@@ -7,10 +8,8 @@ export let frontendConfig = () => {
   return {
     appInfo,
     recipeList: [
+      EmailVerificationReact.init(),
       ThirdPartyEmailPasswordReact.init({
-        emailVerificationFeature: {
-          mode: 'REQUIRED',
-        },
         signInAndUpFeature: {
           providers: [
             ThirdPartyEmailPasswordReact.Google.init(),

examples/with-supertokens/package.json

@@ -9,8 +9,8 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "supertokens-auth-react": "^0.24.7",
-    "supertokens-node": "^11.2.0"
+    "supertokens-auth-react": "^0.26.0",
+    "supertokens-node": "^12.0.0"
   },
   "devDependencies": {
     "@types/react": "18.0.17",

examples/with-supertokens/pages/_app.tsx

@@ -1,10 +1,12 @@
 import '../styles/globals.css'
 import React from 'react'
 import { useEffect } from 'react'
-import SuperTokensReact, { SuperTokensWrapper } from 'supertokens-auth-react'
+import SuperTokensReact, {
+  SuperTokensWrapper,
+  redirectToAuth,
+} from 'supertokens-auth-react'
 import * as SuperTokensConfig from '../config/frontendConfig'
 import Session from 'supertokens-auth-react/recipe/session'
-import { redirectToAuth } from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
 
 if (typeof window !== 'undefined') {
   SuperTokensReact.init(SuperTokensConfig.frontendConfig())

examples/with-supertokens/pages/index.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import Head from 'next/head'
 import styles from '../styles/Home.module.css'
-import ThirdPartyEmailPassword, {
-  ThirdPartyEmailPasswordAuth,
-} from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
+import ThirdPartyEmailPassword from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
 import supertokensNode from 'supertokens-node'
 import { backendConfig } from '../config/backendConfig'
 import Session from 'supertokens-node/recipe/session'
-import { useSessionContext } from 'supertokens-auth-react/recipe/session'
+import {
+  SessionAuth,
+  useSessionContext,
+} from 'supertokens-auth-react/recipe/session'
+import { redirectToAuth } from 'supertokens-auth-react'
 
 export async function getServerSideProps(context) {
   // this runs on the backend, so we must call init on supertokens-node SDK
@@ -18,7 +20,10 @@ export async function getServerSideProps(context) {
   } catch (err) {
     if (err.type === Session.Error.TRY_REFRESH_TOKEN) {
       return { props: { fromSupertokens: 'needs-refresh' } }
-    } else if (err.type === Session.Error.UNAUTHORISED) {
+    } else if (
+      err.type === Session.Error.UNAUTHORISED ||
+      err.type === Session.Error.INVALID_CLAIMS
+    ) {
       return { props: {} }
     } else {
       throw err
@@ -35,7 +40,7 @@ function ProtectedPage({ userId }) {
 
   async function logoutClicked() {
     await ThirdPartyEmailPassword.signOut()
-    ThirdPartyEmailPassword.redirectToAuth()
+    redirectToAuth()
   }
 
   async function fetchUserData() {
@@ -173,8 +178,8 @@ function ProtectedPage({ userId }) {
 
 export default function Home(props) {
   return (
-    <ThirdPartyEmailPasswordAuth>
+    <SessionAuth>
       <ProtectedPage userId={props.userId} />
-    </ThirdPartyEmailPasswordAuth>
+    </SessionAuth>
   )
 }