Skip to content

Commit 41efb82

Browse files
rishabhpoddarrishabhpoddar
authored
Docs update: Adds supertokens to 'Bring Your Own Database' section as well + improvements to code structure in example (vercel#23779)
- Since SuperTokens is a self hosted solution, it can be added to 'Bring Your Own Database' as well (in https://nextjs.org/docs/authentication#supertokens) - Improvements to code structure in the with-supertokens example
1 parent dbb6385 commit 41efb82

File tree

9 files changed

+200
-156
lines changed

9 files changed

+200
-156
lines changed

‎docs/authentication.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ You can either use [FirebaseUI](https://github.com/firebase/firebaseui-web-react
196196
</details>
197197

198198
[SuperTokens](https://supertokens.io) is a highly customizable, open-source solution split into modules (so you only use what you need).
199-
SuperTokens currently supports credentials login, email verification, password reset flows, and third-party logins.
199+
SuperTokens currently supports credentials login, email verification, password reset flows, third-party logins, and cookie based sessions with rotating refresh tokens.
200200

201201
## Related
202202

‎examples/with-supertokens/README.md‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22

33
This is a simple set up for applications protected by SuperTokens.
44

5-
The SuperTokens back end configurations are in `supertokens.js`.
6-
7-
The SuperTokens front end configurations are in `pages/_app.js`.
8-
95
## Deploy your own
106

117
Deploy the example using [Vercel](https://vercel.com):
@@ -24,11 +20,13 @@ yarn create next-app --example with-supertokens with-supertokens-app
2420

2521
## Configuration
2622

27-
Create a `.env.local` file and copy the content of `.env.local.example` into it:
23+
- Create a `.env.local` file and copy the content of `.env.local.example` into it:
2824

29-
```bash
30-
cp .env.local.example .env.local
31-
```
25+
```bash
26+
cp .env.local.example .env.local
27+
```
28+
29+
- Fill in the values for your social login secrets
3230

3331
## Deploy on Vercel
3432

@@ -42,6 +40,4 @@ To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [
4240

4341
## Notes
4442

45-
Take a look at [SuperTokens documentation](https://supertokens.io/docs/emailpassword/introduction) to configure SuperTokens for your project.
46-
47-
Especially, you will want to replace the use of the demo SuperTokens core with your own SuperTokens core instance. See https://supertokens.io/docs/emailpassword/quick-setup/supertokens-core/overview.
43+
Take a look at [SuperTokens documentation](https://supertokens.io/docs/community/introduction).

‎examples/with-supertokens/config/supertokensConfig.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import ThirdPartyEmailPasswordNode from 'supertokens-node/recipe/thirdpartyemailpassword'
2+
import SessionNode from 'supertokens-node/recipe/session'
3+
4+
import ThirdPartyEmailPasswordReact from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
5+
import SessionReact from 'supertokens-auth-react/recipe/session'
6+
7+
const port = process.env.APP_PORT || 3000
8+
const websiteDomain =
9+
process.env.APP_URL ||
10+
process.env.NEXT_PUBLIC_APP_URL ||
11+
`http://localhost:${port}`
12+
const apiBasePath = '/api/auth/'
13+
14+
let appInfo = {
15+
appName: 'SuperTokens Demo App',
16+
websiteDomain,
17+
apiDomain: websiteDomain,
18+
apiBasePath,
19+
}
20+
21+
export let backendConfig = () => {
22+
return {
23+
supertokens: {
24+
connectionURI: 'https://try.supertokens.io',
25+
},
26+
appInfo,
27+
recipeList: [
28+
ThirdPartyEmailPasswordNode.init({
29+
providers: [
30+
ThirdPartyEmailPasswordNode.Google({
31+
clientSecret: process.env.GOOGLE_CLIENT_SECRET || 'PLACEHOLDER',
32+
clientId: process.env.GOOGLE_CLIENT_ID || 'PLACEHOLDER',
33+
}),
34+
ThirdPartyEmailPasswordNode.Github({
35+
clientSecret: process.env.GITHUB_CLIENT_SECRET || 'PLACEHOLDER',
36+
clientId: process.env.GITHUB_CLIENT_ID || 'PLACEHOLDER',
37+
}),
38+
ThirdPartyEmailPasswordNode.Facebook({
39+
clientSecret: process.env.FACEBOOK_CLIENT_SECRET || 'PLACEHOLDER',
40+
clientId: process.env.FACEBOOK_CLIENT_ID || 'PLACEHOLDER',
41+
}),
42+
],
43+
}),
44+
SessionNode.init(),
45+
],
46+
isInServerlessEnv: true,
47+
}
48+
}
49+
50+
export let frontendConfig = () => {
51+
return {
52+
useReactRouterDom: false,
53+
appInfo,
54+
recipeList: [
55+
ThirdPartyEmailPasswordReact.init({
56+
emailVerificationFeature: {
57+
mode: 'REQUIRED',
58+
},
59+
signInAndUpFeature: {
60+
providers: [
61+
ThirdPartyEmailPasswordReact.Google.init(),
62+
ThirdPartyEmailPasswordReact.Github.init(),
63+
ThirdPartyEmailPasswordReact.Facebook.init(),
64+
],
65+
},
66+
}),
67+
SessionReact.init(),
68+
],
69+
}
70+
}

‎examples/with-supertokens/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"next": "latest",
1212
"react": "17.0.1",
1313
"react-dom": "17.0.1",
14-
"supertokens-auth-react": "^0.8",
15-
"supertokens-node": "^4.2.0"
14+
"supertokens-auth-react": "^0.9.0",
15+
"supertokens-node": "^4.3.0"
1616
},
1717
"license": "MIT"
1818
}

‎examples/with-supertokens/pages/_app.js‎

Lines changed: 22 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,35 @@
11
import '../styles/globals.css'
22
import React from 'react'
3+
import { useEffect } from 'react'
34
import SuperTokensReact from 'supertokens-auth-react'
4-
import ThirdPartyEmailPasswordReact from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
5-
import SessionReact from 'supertokens-auth-react/recipe/session'
5+
import * as SuperTokensConfig from '../config/supertokensConfig'
6+
import Session from 'supertokens-auth-react/recipe/session'
67
import SuperTokensNode from 'supertokens-node'
7-
import SessionNode from 'supertokens-node/recipe/session'
8-
import ThirdPartyEmailPasswordNode from 'supertokens-node/recipe/thirdpartyemailpassword'
9-
const port = process.env.APP_PORT || 3000
10-
const websiteDomain =
11-
process.env.APP_URL ||
12-
process.env.NEXT_PUBLIC_APP_URL ||
13-
`http://localhost:${port}`
14-
const apiBasePath = '/api/auth/'
8+
import { redirectToAuth } from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
159

16-
// Client Side configs.
1710
if (typeof window !== 'undefined') {
18-
SuperTokensReact.init({
19-
useReactRouterDom: false,
20-
appInfo: {
21-
appName: 'SuperTokens Demo App',
22-
websiteDomain,
23-
apiDomain: websiteDomain,
24-
apiBasePath,
25-
},
26-
recipeList: [
27-
ThirdPartyEmailPasswordReact.init({
28-
emailVerificationFeature: {
29-
mode: 'REQUIRED',
30-
},
31-
signInAndUpFeature: {
32-
providers: [
33-
ThirdPartyEmailPasswordReact.Google.init(),
34-
ThirdPartyEmailPasswordReact.Github.init(),
35-
ThirdPartyEmailPasswordReact.Facebook.init(),
36-
],
37-
},
38-
}),
39-
SessionReact.init(),
40-
],
41-
})
11+
SuperTokensReact.init(SuperTokensConfig.frontendConfig())
4212
} else {
43-
// Server Side configs.
44-
SuperTokensNode.init({
45-
supertokens: {
46-
connectionURI: 'https://try.supertokens.io', // Replace with your SuperTokens core instance. See https://supertokens.io/docs/emailpassword/quick-setup/supertokens-core/overview
47-
},
48-
appInfo: {
49-
appName: 'SuperTokens Demo App',
50-
websiteDomain,
51-
apiDomain: websiteDomain,
52-
apiBasePath,
53-
},
54-
recipeList: [
55-
ThirdPartyEmailPasswordNode.init({
56-
providers: [
57-
ThirdPartyEmailPasswordNode.Google({
58-
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
59-
clientId: process.env.GOOGLE_CLIENT_ID,
60-
}),
61-
ThirdPartyEmailPasswordNode.Github({
62-
clientSecret: process.env.GITHUB_CLIENT_SECRET,
63-
clientId: process.env.GITHUB_CLIENT_ID,
64-
}),
65-
ThirdPartyEmailPasswordNode.Facebook({
66-
clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
67-
clientId: process.env.FACEBOOK_CLIENT_ID,
68-
}),
69-
],
70-
}),
71-
SessionNode.init(),
72-
],
73-
isInServerlessEnv: true,
74-
})
13+
SuperTokensNode.init(SuperTokensConfig.backendConfig())
7514
}
7615

7716
function MyApp({ Component, pageProps }) {
17+
useEffect(() => {
18+
async function doRefresh() {
19+
if (pageProps.fromSupertokens === 'needs-refresh') {
20+
if (await Session.attemptRefreshingSession()) {
21+
location.reload()
22+
} else {
23+
// user has been logged out
24+
redirectToAuth()
25+
}
26+
}
27+
}
28+
doRefresh()
29+
}, [pageProps.fromSupertokens])
30+
if (pageProps.fromSupertokens === 'needs-refresh') {
31+
return null
32+
}
7833
return <Component {...pageProps} />
7934
}
8035

‎examples/with-supertokens/pages/api/auth/[[...path]].js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
22
import { superTokensNextWrapper } from 'supertokens-node/nextjs'
3-
import { middleware } from 'supertokens-node'
3+
import supertokens from 'supertokens-node'
4+
import * as SuperTokensConfig from '../../../config/supertokensConfig'
5+
6+
supertokens.init(SuperTokensConfig.backendConfig())
47

58
export default async function superTokens(req, res) {
6-
return await superTokensNextWrapper(
9+
await superTokensNextWrapper(
710
async (next) => {
8-
await middleware()(req, res, next)
11+
await supertokens.middleware()(req, res, next)
912
},
1013
req,
1114
res
1215
)
16+
if (!res.writableEnded) {
17+
res.status(404).send('Not found')
18+
}
1319
}

‎examples/with-supertokens/pages/api/user.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
21
import { superTokensNextWrapper } from 'supertokens-node/nextjs'
32
import { verifySession } from 'supertokens-node/recipe/session'
3+
import supertokens from 'supertokens-node'
4+
import * as SuperTokensConfig from '../../config/supertokensConfig'
45

5-
export default async function user(req, res) {
6-
if (req.method !== 'GET') {
7-
return res.end()
8-
}
6+
supertokens.init(SuperTokensConfig.backendConfig())
97

8+
export default async function user(req, res) {
109
await superTokensNextWrapper(
1110
async (next) => {
1211
return await verifySession()(req, res, next)
@@ -18,8 +17,8 @@ export default async function user(req, res) {
1817
return res.json({
1918
note:
2019
'Fetch any data from your application for authenticated user after using verifySession middleware',
21-
userId: req.session.userId,
22-
sessionHandle: req.session.sessionHandle,
23-
userDataInJWT: req.session.userDataInJWT,
20+
userId: req.session.getUserId(),
21+
sessionHandle: req.session.getHandle(),
22+
userDataInJWT: req.session.getJWTPayload(),
2423
})
2524
}

‎examples/with-supertokens/pages/auth/[[...path]].js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,17 @@ import React, { useEffect } from 'react'
33
import styles from '../../styles/Home.module.css'
44
import dynamic from 'next/dynamic'
55
import SuperTokens from 'supertokens-auth-react'
6+
import { redirectToAuth } from 'supertokens-auth-react/recipe/thirdpartyemailpassword'
67

78
const SuperTokensComponentNoSSR = dynamic(
8-
() =>
9-
Promise.resolve().then(() => {
10-
return () => SuperTokens.getRoutingComponent() || null
11-
}),
12-
{
13-
ssr: false,
14-
}
9+
new Promise((res) => res(SuperTokens.getRoutingComponent)),
10+
{ ssr: false }
1511
)
1612

1713
export default function Auth() {
1814
useEffect(() => {
1915
if (SuperTokens.canHandleRoute() === false) {
20-
window.location.href = '/'
16+
redirectToAuth()
2117
}
2218
}, [])
2319

0 commit comments

Comments
 (0)