Examples bump supertokens (#22764)

Hey team! We are updating the `with-supertokens` example to reflect the use of credentials alongside third party login See: ![image](https://user-images.githubusercontent.com/5072452/109943811-dd714b80-7cd5-11eb-91b5-5a966a1c1e2d.png) This PR bumps the versions and add a base example implementation.
vercel · Mar 4, 2021 · f00f4bd · f00f4bd
1 parent 2046648
commit f00f4bd
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 12 deletions.
diff --git a/examples/with-supertokens/.env.local.example b/examples/with-supertokens/.env.local.example
@@ -3,3 +3,15 @@ NEXT_PUBLIC_APP_URL="http://localhost:3000"
 
 # Secret environment variables only available to Node.js
 APP_URL="http://localhost:3000"
+
+## Github
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
+
+## Google
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+## Facebook
+FACEBOOK_CLIENT_ID=
+FACEBOOK_CLIENT_SECRET=
diff --git a/examples/with-supertokens/package.json b/examples/with-supertokens/package.json
@@ -11,8 +11,8 @@
     "next": "latest",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "supertokens-auth-react": "^0.6.0",
-    "supertokens-node": "^4.0.0"
+    "supertokens-auth-react": "^0.7.0",
+    "supertokens-node": "^4.1.0"
   },
   "license": "MIT"
 }
diff --git a/examples/with-supertokens/pages/_app.js b/examples/with-supertokens/pages/_app.js
@@ -1,11 +1,11 @@
 import '../styles/globals.css'
 import React from 'react'
 import SuperTokensReact from 'supertokens-auth-react'
-import EmailPasswordReact from 'supertokens-auth-react/recipe/emailpassword'
+import ThirdPartyEmailPasswordReact from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
 import SessionReact from 'supertokens-auth-react/recipe/session'
 import SuperTokensNode from 'supertokens-node'
 import SessionNode from 'supertokens-node/recipe/session'
-import EmailPasswordNode from 'supertokens-node/recipe/emailpassword'
+import ThirdPartyEmailPasswordNode from 'supertokens-node/recipe/thirdpartyemailpassword'
 const port = process.env.APP_PORT || 3000
 const websiteDomain =
   process.env.APP_URL ||
@@ -24,10 +24,17 @@ if (typeof window !== 'undefined') {
       apiBasePath,
     },
     recipeList: [
-      EmailPasswordReact.init({
+      ThirdPartyEmailPasswordReact.init({
         emailVerificationFeature: {
           mode: 'REQUIRED',
         },
+        signInAndUpFeature: {
+          providers: [
+            ThirdPartyEmailPasswordReact.Google.init(),
+            ThirdPartyEmailPasswordReact.Github.init(),
+            ThirdPartyEmailPasswordReact.Facebook.init(),
+          ],
+        },
       }),
       SessionReact.init(),
     ],
@@ -44,7 +51,25 @@ if (typeof window !== 'undefined') {
       apiDomain: websiteDomain,
       apiBasePath,
     },
-    recipeList: [EmailPasswordNode.init(), SessionNode.init()],
+    recipeList: [
+      ThirdPartyEmailPasswordNode.init({
+        providers: [
+          ThirdPartyEmailPasswordNode.Google({
+            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+            clientId: process.env.GOOGLE_CLIENT_ID,
+          }),
+          ThirdPartyEmailPasswordNode.Github({
+            clientSecret: process.env.GITHUB_CLIENT_SECRET,
+            clientId: process.env.GITHUB_CLIENT_ID,
+          }),
+          ThirdPartyEmailPasswordNode.Facebook({
+            clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
+            clientId: process.env.FACEBOOK_CLIENT_ID,
+          }),
+        ],
+      }),
+      SessionNode.init(),
+    ],
   })
 }
 

diff --git a/examples/with-supertokens/pages/index.js b/examples/with-supertokens/pages/index.js
@@ -1,19 +1,22 @@
 import React from 'react'
 import Head from 'next/head'
 import styles from '../styles/Home.module.css'
-import EmailPassword from 'supertokens-auth-react/recipe/emailpassword'
+import ThirdPartyEmailPassword from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
 import dynamic from 'next/dynamic'
 
-const EmailPasswordAuthNoSSR = dynamic(
-  () => Promise.resolve().then(() => EmailPassword.EmailPasswordAuth),
+const ThirdPartyEmailPasswordAuthNoSSR = dynamic(
+  () =>
+    Promise.resolve().then(
+      () => ThirdPartyEmailPassword.ThirdPartyEmailPasswordAuth
+    ),
   {
     ssr: false,
   }
 )
 
 export default function Home() {
   async function logoutClicked() {
-    await EmailPassword.signOut()
+    await ThirdPartyEmailPassword.signOut()
     window.location.href = '/auth'
   }
 
@@ -34,7 +37,7 @@ export default function Home() {
         <h1 className={styles.title}>
           Welcome to <a href="https://nextjs.org">Next.js!</a>
         </h1>
-        <EmailPasswordAuthNoSSR>
+        <ThirdPartyEmailPasswordAuthNoSSR>
           <p className={styles.description}>
             You are authenticated with SuperTokens!
           </p>
@@ -95,7 +98,7 @@ export default function Home() {
               FETCH USER API
             </div>
           </div>
-        </EmailPasswordAuthNoSSR>
+        </ThirdPartyEmailPasswordAuthNoSSR>
 
         <div className={styles.grid}>
           <a href="https://nextjs.org/docs" className={styles.card}>