Updates with-supertokens example (#38369)

* add-supertokens-to-authentication.md

* bump supertokens deps

* update SuperTokens Auth doc

* Update docs/authentication.md

Co-authored-by: Lee Robinson <me@leerob.io>

* Update docs/authentication.md

Co-authored-by: Lee Robinson <me@leerob.io>

* updates supertokens dependency and optimises for serverless execution

* runs prettier-fix

* adds supertokens to 'Bring Your Own Database' section as well

* does not show home page if not logged in

* extracts config into its own file and calls it in all serverless functions

* removes need for backend init in app.jsx

* simplifies use of dynamic

* refreshes page after getServerSideProps

* removes unnecessary check in API

* update to docs pertaining SuperTokens

* adds placeholder secrets so that the UI loads on first run

* changes to readme

* updates version of supertokens frontend and backend SDK, and a few other fixes

* Update docs/authentication.md

Co-authored-by: Lee Robinson <me@leerob.io>

* updates to readme for supertokens example

* updates version of dependency

* updates dependency version

* updates to dependencies

* removes unnecessary config on frontend

* changes how redirection is done post signout

* update to dependency

* updates examples

* updates code to use for new package

* updates dependencies

* updates auth-react package

* with-supertokens example updated to use supertokens-node v7

* updates dependency

* updates supertokens-node version

* Update examples/with-supertokens/package.json

Co-authored-by: Lee Robinson <me@leerob.io>

* updates based on check-examples.sh script

* linter fix

* updates supertokens-auth-react dependency version

* adds development OAuth key to example

* removes section from README

* removes unnecessary file

* updates dependency versions

* with-supertokens: reduced bundle size by removing node lib from bundle

Linting fix

* Removed accidentally added config file

* adds sign in with apple

* extracted oauth keys to .env file

* fixes node init issue race condition

* removes unnecessary file

* updates supertokens-auth-react dependency

* updates superttokens-node dependency

* adds a cap to react dependency

* updates eslint-config-next version

* removes unnecessary dev dependency

* updates to latest version of supertokens-auth-react SDK

* Updated nextjs in supertokens example

* Update examples/with-supertokens/package.json

* Update examples/with-supertokens/package.json

* Update package.json

* Update examples/with-supertokens/package.json

Co-authored-by: Balázs Orbán <info@balazsorban.com>

* Update examples/with-supertokens/package.json

Co-authored-by: Balázs Orbán <info@balazsorban.com>

* updates to supertokens-auth-react version

* feat: update&improve ssr in with-supertokens

* refactor: implement review feedback

* refactor: moved everything into ProtectedPage to make Auth component usage clearer

* refactor: implement review feedback

* updates dependency version and uses nextjs router for navigation

* removes prettier dendency in with-supertokens example app

Author: rishabhpoddar

examples/with-supertokens/config/frontendConfig.js

@@ -1,6 +1,7 @@
 import ThirdPartyEmailPasswordReact from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
 import SessionReact from 'supertokens-auth-react/recipe/session'
 import { appInfo } from './appInfo'
+import Router from 'next/router'
 
 export let frontendConfig = () => {
   return {
@@ -20,5 +21,17 @@ export let frontendConfig = () => {
       }),
       SessionReact.init(),
     ],
+    // this is so that the SDK uses the next router for navigation
+    windowHandler: (oI) => {
+      return {
+        ...oI,
+        location: {
+          ...oI.location,
+          setHref: (href) => {
+            Router.push(href)
+          },
+        },
+      }
+    },
   }
 }

examples/with-supertokens/package.json

@@ -9,7 +9,7 @@
     "next": "latest",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "supertokens-auth-react": "^0.21.2",
-    "supertokens-node": "^9.1.1"
+    "supertokens-auth-react": "^0.24.0",
+    "supertokens-node": "^11.0.0"
   }
 }

examples/with-supertokens/pages/_app.js

@@ -1,7 +1,7 @@
 import '../styles/globals.css'
 import React from 'react'
 import { useEffect } from 'react'
-import SuperTokensReact from 'supertokens-auth-react'
+import SuperTokensReact, { SuperTokensWrapper } 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'
@@ -27,7 +27,12 @@ function MyApp({ Component, pageProps }) {
   if (pageProps.fromSupertokens === 'needs-refresh') {
     return null
   }
-  return <Component {...pageProps} />
+
+  return (
+    <SuperTokensWrapper>
+      <Component {...pageProps} />
+    </SuperTokensWrapper>
+  )
 }
 
 export default MyApp

examples/with-supertokens/pages/index.js

@@ -1,18 +1,13 @@
 import React from 'react'
 import Head from 'next/head'
 import styles from '../styles/Home.module.css'
-import ThirdPartyEmailPassword from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
-import dynamic from 'next/dynamic'
+import ThirdPartyEmailPassword, {
+  ThirdPartyEmailPasswordAuth,
+} from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
 import supertokensNode from 'supertokens-node'
 import { backendConfig } from '../config/backendConfig'
 import Session from 'supertokens-node/recipe/session'
-
-const ThirdPartyEmailPasswordAuthNoSSR = dynamic(
-  new Promise((res) =>
-    res(ThirdPartyEmailPassword.ThirdPartyEmailPasswordAuth)
-  ),
-  { ssr: false }
-)
+import { useSessionContext } from 'supertokens-auth-react/recipe/session'
 
 export async function getServerSideProps(context) {
   // this runs on the backend, so we must call init on supertokens-node SDK
@@ -37,13 +32,15 @@ export async function getServerSideProps(context) {
 
 export default function Home(props) {
   return (
-    <ThirdPartyEmailPasswordAuthNoSSR>
+    <ThirdPartyEmailPasswordAuth>
       <ProtectedPage userId={props.userId} />
-    </ThirdPartyEmailPasswordAuthNoSSR>
+    </ThirdPartyEmailPasswordAuth>
   )
 }
 
 function ProtectedPage({ userId }) {
+  const session = useSessionContext()
+
   async function logoutClicked() {
     await ThirdPartyEmailPassword.signOut()
     ThirdPartyEmailPassword.redirectToAuth()
@@ -57,21 +54,30 @@ function ProtectedPage({ userId }) {
     }
   }
 
+  if (session.loading === true) {
+    return null
+  }
+
   return (
     <div className={styles.container}>
       <Head>
         <title>SuperTokens 💫</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
       <main className={styles.main}>
         <h1 className={styles.title}>
           Welcome to <a href="https://nextjs.org">Next.js!</a>
         </h1>
         <p className={styles.description}>
-          You are authenticated with SuperTokens! (UserID: {userId})
+          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',