Skip to content

Commit 45c0978

Browse files
ericapisaniericapisani
authored
feat: ✨ add out-of-the-box support for NextAuth.js (#1309)
1 parent d9f53e4 commit 45c0978

37 files changed

+1010
-3
lines changed

‎demos/next-auth/.env.local.example

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
NEXTAUTH_URL=http://localhost:3000
2+
3+
NETLIFY_CLIENT_ID=
4+
NETLIFY_CLIENT_SECRET=

‎demos/next-auth/.eslintrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"extends": "next",
3+
"root": true
4+
}

‎demos/next-auth/.gitignore

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
.pnpm-debug.log*
9+
10+
# Diagnostic reports (https://nodejs.org/api/report.html)
11+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12+
13+
# Runtime data
14+
pids
15+
*.pid
16+
*.seed
17+
*.pid.lock
18+
19+
# Directory for instrumented libs generated by jscoverage/JSCover
20+
lib-cov
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
*.lcov
25+
26+
# nyc test coverage
27+
.nyc_output
28+
29+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30+
.grunt
31+
32+
# Bower dependency directory (https://bower.io/)
33+
bower_components
34+
35+
# node-waf configuration
36+
.lock-wscript
37+
38+
# Compiled binary addons (https://nodejs.org/api/addons.html)
39+
build/Release
40+
41+
# Dependency directories
42+
node_modules/
43+
jspm_packages/
44+
45+
# Snowpack dependency directory (https://snowpack.dev/)
46+
web_modules/
47+
48+
# TypeScript cache
49+
*.tsbuildinfo
50+
51+
# Optional npm cache directory
52+
.npm
53+
54+
# Optional eslint cache
55+
.eslintcache
56+
57+
# Optional stylelint cache
58+
.stylelintcache
59+
60+
# Microbundle cache
61+
.rpt2_cache/
62+
.rts2_cache_cjs/
63+
.rts2_cache_es/
64+
.rts2_cache_umd/
65+
66+
# Optional REPL history
67+
.node_repl_history
68+
69+
# Output of 'npm pack'
70+
*.tgz
71+
72+
# Yarn Integrity file
73+
.yarn-integrity
74+
75+
# dotenv environment variable files
76+
.env
77+
.env.development.local
78+
.env.test.local
79+
.env.production.local
80+
.env.local
81+
82+
# parcel-bundler cache (https://parceljs.org/)
83+
.cache
84+
.parcel-cache
85+
86+
# Next.js build output
87+
.next
88+
out
89+
90+
# Nuxt.js build / generate output
91+
.nuxt
92+
dist
93+
94+
# Gatsby files
95+
.cache/
96+
# Comment in the public line in if your project uses Gatsby and not Next.js
97+
# https://nextjs.org/blog/next-9-1#public-directory-support
98+
# public
99+
100+
# vuepress build output
101+
.vuepress/dist
102+
103+
# vuepress v2.x temp and cache directory
104+
.temp
105+
.cache
106+
107+
# Docusaurus cache and generated files
108+
.docusaurus
109+
110+
# Serverless directories
111+
.serverless/
112+
113+
# FuseBox cache
114+
.fusebox/
115+
116+
# DynamoDB Local files
117+
.dynamodb/
118+
119+
# TernJS port file
120+
.tern-port
121+
122+
# Stores VSCode versions used for testing VSCode extensions
123+
.vscode-test
124+
125+
# yarn v2
126+
.yarn/cache
127+
.yarn/unplugged
128+
.yarn/build-state.yml
129+
.yarn/install-state.gz
130+
.pnp.*

‎demos/next-auth/LICENSE

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
ISC License
2+
3+
Copyright (c) 2018-2021, Iain Collins
4+
5+
Permission to use, copy, modify, and/or distribute this software for any
6+
purpose with or without fee is hereby granted, provided that the above
7+
copyright notice and this permission notice appear in all copies.
8+
9+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
10+
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
11+
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
12+
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
13+
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
14+
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
15+
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

‎demos/next-auth/README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
## NextAuth.js Example
2+
3+
This example project came from [next-auth-example](https://github.com/nextauthjs/next-auth-example) provided by the NextAuth.js and was modified to use Netlify as the authentication provider as an example.
4+
5+
For more details on how to get set up and configured with various providers, visit the link above.
6+
7+
### Running locally
8+
9+
Within this project directory:
10+
11+
```
12+
npm install
13+
npm run dev
14+
```
15+
16+
### Configuring your local environment
17+
18+
Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):
19+
20+
```
21+
cp .env.local.example .env.local
22+
```
23+
24+
Add details for the [Netlify Provider](https://next-auth.js.org/providers/netlify), which will require create a Netlify OAuth application.
25+
26+
To create a Netlify OAuth application:
27+
* Visit `https://app.netlify.com/user/applications`
28+
* Click 'New OAuth App'
29+
* Enter an application name
30+
* Enter a redirect URI (for the purposes of this demo application you would use `http://localhost:3000/api/auth/callback/netlify`)
31+
* Save the application, and copy the value for 'Client ID' as the `NETLIFY_CLIENT_ID` and the 'Client Secret' as the `NETLIFY_CLIENT_SECRET` into your `.env.local` file within the project
32+
* If you're testing this on a deployed Netlify site you'll need to set the environment variables as part of the `Site Settings > Build & Deploy > Environment` settings. You'll also need to generate a `NEXTAUTH_SECRET` environment variable and set that for a production build.
33+
34+
For configuring additional authentication providers, see the original documentation [here](https://github.com/nextauthjs/next-auth-example#3-configure-authentication-providers)

‎demos/next-auth/components/access-denied.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { signIn } from "next-auth/react"
2+
3+
export default function AccessDenied() {
4+
return (
5+
<>
6+
<h1>Access Denied</h1>
7+
<p>
8+
<a
9+
href="/api/auth/signin"
10+
onClick={(e) => {
11+
e.preventDefault()
12+
signIn()
13+
}}
14+
>
15+
You must be signed in to view this page
16+
</a>
17+
</p>
18+
</>
19+
)
20+
}

‎demos/next-auth/components/footer.module.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.footer {
2+
margin-top: 2rem;
3+
}
4+
5+
.navItems {
6+
margin-bottom: 1rem;
7+
padding: 0;
8+
list-style: none;
9+
}
10+
11+
.navItem {
12+
display: inline-block;
13+
margin-right: 1rem;
14+
}

‎demos/next-auth/components/footer.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import Link from "next/link"
2+
import styles from "./footer.module.css"
3+
import packageJSON from "../package.json"
4+
5+
export default function Footer() {
6+
return (
7+
<footer className={styles.footer}>
8+
<hr />
9+
<ul className={styles.navItems}>
10+
<li className={styles.navItem}>
11+
<a href="https://next-auth.js.org">Documentation</a>
12+
</li>
13+
<li className={styles.navItem}>
14+
<a href="https://www.npmjs.com/package/next-auth">NPM</a>
15+
</li>
16+
<li className={styles.navItem}>
17+
<a href="https://github.com/nextauthjs/next-auth-example">GitHub</a>
18+
</li>
19+
<li className={styles.navItem}>
20+
<Link href="/policy">
21+
<a>Policy</a>
22+
</Link>
23+
</li>
24+
<li className={styles.navItem}>
25+
<em>next-auth@{packageJSON.dependencies["next-auth"]}</em>
26+
</li>
27+
</ul>
28+
</footer>
29+
)
30+
}

‎demos/next-auth/components/header.module.css

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/* Set min-height to avoid page reflow while session loading */
2+
.signedInStatus {
3+
display: block;
4+
min-height: 4rem;
5+
width: 100%;
6+
}
7+
8+
.loading,
9+
.loaded {
10+
position: relative;
11+
top: 0;
12+
opacity: 1;
13+
overflow: hidden;
14+
border-radius: 0 0 0.6rem 0.6rem;
15+
padding: 0.6rem 1rem;
16+
margin: 0;
17+
background-color: rgba(0, 0, 0, 0.05);
18+
transition: all 0.2s ease-in;
19+
}
20+
21+
.loading {
22+
top: -2rem;
23+
opacity: 0;
24+
}
25+
26+
.signedInText,
27+
.notSignedInText {
28+
position: absolute;
29+
padding-top: 0.8rem;
30+
left: 1rem;
31+
right: 6.5rem;
32+
white-space: nowrap;
33+
text-overflow: ellipsis;
34+
overflow: hidden;
35+
display: inherit;
36+
z-index: 1;
37+
line-height: 1.3rem;
38+
}
39+
40+
.signedInText {
41+
padding-top: 0rem;
42+
left: 4.6rem;
43+
}
44+
45+
.avatar {
46+
border-radius: 2rem;
47+
float: left;
48+
height: 2.8rem;
49+
width: 2.8rem;
50+
background-color: white;
51+
background-size: cover;
52+
background-repeat: no-repeat;
53+
}
54+
55+
.button,
56+
.buttonPrimary {
57+
float: right;
58+
margin-right: -0.4rem;
59+
font-weight: 500;
60+
border-radius: 0.3rem;
61+
cursor: pointer;
62+
font-size: 1rem;
63+
line-height: 1.4rem;
64+
padding: 0.7rem 0.8rem;
65+
position: relative;
66+
z-index: 10;
67+
background-color: transparent;
68+
color: #555;
69+
}
70+
71+
.buttonPrimary {
72+
background-color: #346df1;
73+
border-color: #346df1;
74+
color: #fff;
75+
text-decoration: none;
76+
padding: 0.7rem 1.4rem;
77+
}
78+
79+
.buttonPrimary:hover {
80+
box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.2);
81+
}
82+
83+
.navItems {
84+
margin-bottom: 2rem;
85+
padding: 0;
86+
list-style: none;
87+
}
88+
89+
.navItem {
90+
display: inline-block;
91+
margin-right: 1rem;
92+
}

0 commit comments

Comments
 (0)