Skip to content

Commit 99a7a6a

Browse files
mnphpexpertmnphpexpert
committed
feat: improve package development experience (nextauthjs#1064)
* chore(deps): add next and react to dev dependencies * chore: move build configs to avoid crash with next dev * chore: add next js dev app * chore: remove .txt extension from LICENSE file * chore: update CONTRIBUTING.md * chore: watch css under development * style(lint): run linter on index.css * chore: fix some imports for dev server * refactor: simplify client code * chore: mention VSCode extension for linting * docs: reword CONTRIBUTING.md * chore: ignore linting pages and components
1 parent 5add95a commit 99a7a6a

32 files changed

+4470
-240
lines changed

‎CONTRIBUTING.md

Lines changed: 23 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -17,70 +17,47 @@ Anyone can be a contributor. Either you found a typo, or you have an awesome fea
1717
* Pull Requests should be raised for any change
1818
* Pull Requests need approval of a [core contributor](https://next-auth.js.org/contributors#core-team) before merging
1919
* Rebasing in Pull Requests is preferred to keep a clean commit history (see below)
20-
* Running `npm run lint:fix` before committing can make resolving conflicts easier
20+
* Run `npm run lint:fix` before committing to make resolving conflicts easier (VSCode users, check out [this extension](https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs) to fix lint issues in development)
2121
* We encourage you to test your changes, and if you have the opportunity, please make those tests part of the Pull Request
2222
* If you add new functionality, please provide the corresponding documentation as well and make it part of the Pull Request
2323

2424
### Setting up local environment
2525

26-
A quick and dirty guide on how to setup *next-auth* locally to work on it and test out any changes:
26+
A quick guide on how to setup *next-auth* locally to work on it and test out any changes:
2727

2828
1. Clone the repo:
29+
```sh
30+
git clone [email protected]:nextauthjs/next-auth.git
31+
cd next-auth
32+
```
2933

30-
git clone [email protected]:nextauthjs/next-auth.git
31-
cd next-auth/
32-
33-
2. Install packages and run the build command:
34-
35-
npm i
36-
npm run build
37-
38-
3. Link your project back to your local copy of next auth:
39-
40-
cd ../your-application
41-
npm link ../next-auth
34+
2. Install packages:
35+
```sh
36+
npm i
37+
```
4238

43-
4. Finally link React between the repo and the version installed in your project:
39+
3. Populate `.env.local`:
40+
41+
Copy `.env.example` to `.env.local`, and add your env variables for each provider you want to test.
4442

45-
cd ../next-auth
46-
npm link ../your-application/node_modules/react
43+
>NOTE: You can configure providers of the dev app in `pages/api/auth/[...nextauth].js`
4744
48-
*This is an annoying step and not obvious, but is needed because of how React has been written (otherwise React crashes when you try to use the `useSession()` hook in your project).*
45+
4. Start the dev application/server and CSS watching:
46+
```sh
47+
npm run dev
48+
```
4949

50-
That's it!
50+
Your dev application will be available on ```http://localhost:3000```
5151

52-
Notes: You may need to repeat both `npm link` steps if you install / update additional dependencies with `npm i`.
52+
That's it! 🎉
5353

5454
If you need an example project to link to, you can use [next-auth-example](https://github.com/iaincollins/next-auth-example).
5555

5656
#### Hot reloading
5757

58-
You might find it helpful to use the `npm run watch` command in the next-auth project, which will automatically (and silently) rebuild JS and CSS files as you edit them.
59-
60-
cd next-auth/
61-
npm run watch
62-
63-
If you are working on `next-auth/src/client/index.js` hot reloading will work as normal in your Next.js app.
58+
When running `npm run dev`, you start a Next.js dev server on `http://localhost:3000`, which includes hot reloading out of the box. Make changes on any of the files in `src` and see the changes immediately.
6459

65-
However, if you are working on anything else (e.g. `next-auth/src/server/*` etc) then you will need to *stop and start* your app for changes to apply as **Next.js will not hot reload those changes by default**. To facilitate this, you can try [this webpack plugin](https://www.npmjs.com/package/webpack-clear-require-cache-plugin). Note that the `next.config.js` syntax in the plugin README may be out of date. It should look like this:
66-
67-
```
68-
const clearRequireCachePlugin = require('webpack-clear-require-cache-plugin')
69-
70-
module.exports = {
71-
webpack: (config, {
72-
buildId, dev, isServer, defaultLoaders, webpack,
73-
}) => {
74-
config.plugins.push(clearRequireCachePlugin([
75-
/\.next\/server\/static\/development\/pages/,
76-
/\.next\/server\/ssr-module-cache.js/,
77-
/next-auth/,
78-
]))
79-
80-
return config
81-
},
82-
}
83-
```
60+
>NOTE: When working on CSS, you will need to manually refresh the page after changes. (Improving this through a PR is very welcome!)
8461
8562
#### Databases
8663

@@ -90,7 +67,7 @@ It will use port `3306`, `5432`, and `27017` on localhost respectively; please m
9067

9168
You can start them with `npm run db:start` and stop them with `npm run db:stop`.
9269

93-
You will need Docker installed to be able to start / stop the databases.
70+
You will need Docker and Docker Compose installed to be able to start / stop the databases.
9471

9572
When stopping the databases, it will reset their contents.
9673

‎LICENSE.txt renamed to ‎LICENSE

File renamed without changes.

‎babel.config.json

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎components/access-denied.js

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

‎components/footer.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Link from 'next/link'
2+
import styles from './footer.module.css'
3+
import { version } 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}><a href='https://next-auth.js.org'>Documentation</a></li>
11+
<li className={styles.navItem}><a href='https://www.npmjs.com/package/next-auth'>NPM</a></li>
12+
<li className={styles.navItem}><a href='https://github.com/nextauthjs/next-auth-example'>GitHub</a></li>
13+
<li className={styles.navItem}><Link href='/policy'><a>Policy</a></Link></li>
14+
<li className={styles.navItem}><em>{version}</em></li>
15+
</ul>
16+
</footer>
17+
)
18+
}

‎components/footer.module.css

Lines changed: 14 additions & 0 deletions
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+
}

‎components/header.js

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import Link from 'next/link'
2+
import { signIn, signOut, useSession } from 'next-auth/client'
3+
import * as client from 'next-auth/client'
4+
import styles from './header.module.css'
5+
6+
// The approach used in this component shows how to built a sign in and sign out
7+
// component that works on pages which support both client and server side
8+
// rendering, and avoids any flash incorrect content on initial page load.
9+
export default function Header () {
10+
const [session, loading] = useSession()
11+
12+
return (
13+
<header>
14+
<noscript>
15+
<style>{'.nojs-show { opacity: 1; top: 0; }'}</style>
16+
</noscript>
17+
<div className={styles.signedInStatus}>
18+
<p
19+
className={`nojs-show ${
20+
!session && loading ? styles.loading : styles.loaded
21+
}`}
22+
>
23+
{!session && (
24+
<>
25+
<span className={styles.notSignedInText}>
26+
You are not signed in
27+
</span>
28+
<a
29+
href="/api/auth/signin"
30+
className={styles.buttonPrimary}
31+
onClick={(e) => {
32+
e.preventDefault()
33+
signIn('github')
34+
}}
35+
>
36+
Sign in
37+
</a>
38+
</>
39+
)}
40+
{session && (
41+
<>
42+
{session.user.image && (
43+
<span
44+
style={{ backgroundImage: `url(${session.user.image})` }}
45+
className={styles.avatar}
46+
/>
47+
)}
48+
<span className={styles.signedInText}>
49+
<small>Signed in as</small>
50+
<br />
51+
<strong>{session.user.email || session.user.name}</strong>
52+
</span>
53+
<a
54+
href="/api/auth/signout"
55+
className={styles.button}
56+
onClick={(e) => {
57+
e.preventDefault()
58+
signOut()
59+
}}
60+
>
61+
Sign out
62+
</a>
63+
</>
64+
)}
65+
</p>
66+
</div>
67+
<nav>
68+
<ul className={styles.navItems}>
69+
<li className={styles.navItem}>
70+
<Link href='/'>
71+
<a>Home</a>
72+
</Link>
73+
</li>
74+
<li className={styles.navItem}>
75+
<Link href='/client'>
76+
<a>Client</a>
77+
</Link>
78+
</li>
79+
<li className={styles.navItem}>
80+
<Link href='/server'>
81+
<a>Server</a>
82+
</Link>
83+
</li>
84+
<li className={styles.navItem}>
85+
<Link href='/protected'>
86+
<a>Protected</a>
87+
</Link>
88+
</li>
89+
<li className={styles.navItem}>
90+
<Link href='/protected-ssr'>
91+
<a>Protected(SSR)</a>
92+
</Link>
93+
</li>
94+
<li className={styles.navItem}>
95+
<Link href='/api-example'>
96+
<a>API</a>
97+
</Link>
98+
</li>
99+
</ul>
100+
</nav>
101+
</header>
102+
)
103+
}

‎components/header.module.css

Lines changed: 92 additions & 0 deletions
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 .6rem .6rem;
15+
padding: .6rem 1rem;
16+
margin: 0;
17+
background-color: rgba(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: .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: -.4rem;
59+
font-weight: 500;
60+
border-radius: .3rem;
61+
cursor: pointer;
62+
font-size: 1rem;
63+
line-height: 1.4rem;
64+
padding: .7rem .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: .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+
}

‎components/layout.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Header from 'components/header'
2+
import Footer from 'components/footer'
3+
4+
export default function Layout ({ children }) {
5+
return (
6+
<>
7+
<Header />
8+
<main>
9+
{children}
10+
</main>
11+
<Footer />
12+
</>
13+
)
14+
}

‎config/babel.config.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"presets": [
3+
["@babel/preset-env", { "targets": { "esmodules": true } }]
4+
],
5+
"comments": false,
6+
"overrides": [
7+
{
8+
"test": ["../src/server/pages/**"],
9+
"presets": ["preact"]
10+
}
11+
]
12+
}

‎postcss.config.js renamed to ‎config/postcss.config.js

File renamed without changes.

‎scripts/wrap-css.js renamed to ‎config/wrap-css.js

File renamed without changes.

0 commit comments

Comments
 (0)