docs: misc improvements [skip release] (#1043)

LICENSE.txt

@@ -1,6 +1,6 @@
 ISC License
 
-Copyright (c) 2018-2020, Iain Collins
+Copyright (c) 2018-2021, Iain Collins
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

README.md

@@ -114,26 +114,22 @@ export default NextAuth({
 ### Add React Component
 
 ```javascript
-import React from 'react'
-import { 
-  useSession, 
-  signIn,
-  signOut
+import {
+  useSession, signIn, signOut
 } from 'next-auth/client'
 
-export default function myComponent() {
+export default function Component() {
   const [ session, loading ] = useSession()
-
-  return <p>
-    {!session && <>
-      Not signed in <br/>
-      <button onClick={() => signIn()}>Sign in</button>
-    </>}
-    {session && <>
+  if(session) {
+    return <>
       Signed in as {session.user.email} <br/>
       <button onClick={() => signOut()}>Sign out</button>
-    </>}
-  </p>
+    </>
+  }
+  return <>
+    Not signed in <br/>
+    <button onClick={() => signIn()}>Sign in</button>
+  </>
 }
 ```
 
@@ -147,7 +143,7 @@ export default function myComponent() {
 
 ## Contributing
 
-We're open to all community contributions! If you'd like to contribute in any way, please first read our [Contributing Guide](https://github.com/iaincollins/next-auth/blob/main/CONTRIBUTING.md).
+We're open to all community contributions! If you'd like to contribute in any way, please first read our [Contributing Guide](https://github.com/nextauthjs/next-auth/blob/canary/CONTRIBUTING.md).
 
 ## License
 

scripts/wrap-css.js

@@ -1,6 +1,6 @@
 // Serverless target in Next.js does not work if you try to read in files at runtime
 // that are not JavaScript or JSON (e.g. CSS files).
-// https://github.com/iaincollins/next-auth/issues/281
+// https://github.com/nextauthjs/next-auth/issues/281
 //
 // To work around this issue, this script is a manual step that wraps CSS in a
 // JavaScript file that has the compiled CSS embedded in it, and exports only

src/server/lib/oauth/callback.js

@@ -91,7 +91,7 @@ export default async function oAuthCallback (req, csrfToken) {
               error, profileData, accessToken, refreshToken, provider, user, idToken: results.id_token
             })
           } else {
-            // Use custom get() method for oAuth2 flows
+            // Use custom get() method for OAuth2 flows
             client.get = _get
 
             client.get(

www/docs/configuration/callbacks.md

@@ -3,7 +3,7 @@ id: callbacks
 title: Callbacks
 ---
 
-Callbacks are asynchronous functions you can use to control what happens when an action is performed.
+Callbacks are **asynchronous** functions you can use to control what happens when an action is performed.
 
 Callbacks are extremely powerful, especially in scenarios involving JSON Web Tokens as they allow you to implement access controls without a database and to integrate with external databases or APIs.
 

www/docs/configuration/pages.md

@@ -28,7 +28,6 @@ To add a custom login page, for example. You can use the `pages` option:
 In order to get the available authentication providers and the URLs to use for them, you can make a request to the API endpoint `/api/auth/providers`:
 
 ```jsx title="pages/auth/signin.js"
-import React from 'react'
 import { providers, signIn } from 'next-auth/client'
 
 export default function SignIn({ providers }) {
@@ -55,7 +54,6 @@ SignIn.getInitialProps = async (context) => {
 If you create a custom sign in form for email sign in, you will need to submit both fields for the **email** address and **csrfToken** from **/api/auth/csrf** in a POST request to **/api/auth/signin/email**.
 
 ```jsx title="pages/auth/email-signin.js"
-import React from 'react'
 import { csrfToken } from 'next-auth/client'
 
 export default function SignIn({ csrfToken }) {
@@ -89,7 +87,6 @@ signIn('email', { email: 'jsmith@example.com' })
 If you create a sign in form for credentials based authentication, you will need to pass a **csrfToken** from **/api/auth/csrf** in a POST request to **/api/auth/callback/credentials**.
 
 ```jsx title="pages/auth/credentials-signin.js"
-import React from 'react'
 import { csrfToken } from 'next-auth/client'
 
 export default function SignIn({ csrfToken }) {

www/docs/faq.md

@@ -111,7 +111,7 @@ NextAuth.js records Refresh Tokens and Access Tokens on sign in (if supplied by
 
 You can then look them up from the database or persist them to the JSON Web Token.
 
-Note: NextAuth.js does not current handle Access Token rotation for OAuth providers for you, if this is something you need, currently you will need to write the logic to handle that yourself. 
+Note: NextAuth.js does not currently handle Access Token rotation for OAuth providers for you, if this is something you need, currently you will need to write the logic to handle that yourself. 
 
 ### When I sign in with another account with the same email address, why are accounts not linked automatically?
 

www/docs/getting-started/client.md

@@ -41,13 +41,14 @@ It works best when the [`<Provider>`](#provider) is added to `pages/_app.js`.
 ```jsx
 import { useSession } from 'next-auth/client'
 
-export default () => {
+export default function Component() {
   const [ session, loading ] = useSession()
 
-  return <>
-    {session && <p>Signed in as {session.user.email}</p>}
-    {!session && <p><a href="/api/auth/signin">Sign in</a></p>}
-  </>
+  if(session) {
+    return <p>Signed in as {session.user.email}</p>
+  }
+
+  return <a href="/api/auth/signin">Sign in</a>
 }
 ```
 

www/docs/getting-started/example.md

@@ -47,7 +47,6 @@ See the [options documentation](/configuration/options) for how to configure pro
 The `useSession()` React Hook in the NextAuth.js client is the easiest way to check if someone is signed in.
 
 ```jsx title="pages/index.js"
-import React from 'react'
 import { signIn, signOut, useSession } from 'next-auth/client'
 
 export default function Page() {

www/docs/getting-started/typescript.md

@@ -0,0 +1,22 @@
+---
+id: typescript
+title: TypeScript Support
+---
+
+Currently, NextAuth.js relies on the community to provide TypeScript types. You can download it from [DefinitelyTyped](https://www.npmjs.com/package/@types/next-auth).
+
+Add it to your project with:
+
+```sh
+npm i -D @types/next-auth
+```
+
+or
+
+```sh
+yarn add -D @types/next-auth
+```
+
+You can find an initial Pull Request at [next-auth#516](https://github.com/nextauthjs/next-auth/pull/516) adding TypeScript. At the time of this writing, it looks like we would like to go from a complete migration to a more relaxed, incremental rewrite.
+
+Feel free to open a Pull Request, if you would like to contribute!

www/docs/tutorials/securing-pages-and-api-routes.md

@@ -48,14 +48,13 @@ export default function Page() {
 
   if (typeof window !== 'undefined' && loading) return null
 
-  if (!session) return <p>Access Denied</p>
-
-  return (
-    <>
+  if (session) {
+    return <>
       <h1>Protected Page</h1>
       <p>You can view this page because you are signed in.</p>
     </>
-  )
+  }
+  return <p>Access Denied</p>
 }
 
 export async function getServerSideProps(context) {

www/docusaurus.config.js

@@ -42,7 +42,7 @@ module.exports = {
           position: 'right'
         },
         {
-          href: 'https://github.com/iaincollins/next-auth',
+          href: 'https://github.com/nextauthjs/next-auth',
           label: 'GitHub',
           position: 'right'
         }
@@ -78,7 +78,7 @@ module.exports = {
           items: [
             {
               label: 'GitHub',
-              to: 'https://github.com/iaincollins/next-auth'
+              to: 'https://github.com/nextauthjs/next-auth'
             },
             {
               label: 'NPM',
@@ -100,7 +100,7 @@ module.exports = {
           ]
         }
       ],
-      copyright: 'NextAuth.js © Iain Collins 2020'
+      copyright: 'NextAuth.js © Iain Collins 2021'
     }
   },
   presets: [
@@ -110,7 +110,7 @@ module.exports = {
         docs: {
           routeBasePath: '/',
           sidebarPath: require.resolve('./sidebars.js'),
-          editUrl: 'https://github.com/iaincollins/next-auth/edit/main/www'
+          editUrl: 'https://github.com/nextauthjs/next-auth/edit/main/www'
         },
         theme: {
           customCss: require.resolve('./src/css/index.css')

www/sidebars.js

@@ -4,7 +4,8 @@ module.exports = {
       'getting-started/introduction',
       'getting-started/example',
       'getting-started/client',
-      'getting-started/rest-api'
+      'getting-started/rest-api',
+      'getting-started/typescript'
     ],
     Configuration: [
       'configuration/options',

www/src/pages/index.js

@@ -192,28 +192,23 @@ function Home () {
 }
 
 const reactComponentCode = `
-import React from 'react'
 import {
-  signIn, 
-  signOut,
-  useSession
+  useSession, signIn, signOut
 } from 'next-auth/client'
 
-export default function myComponent() {
+export default function Component() {
   const [ session, loading ] = useSession()
-
-  return <>
-    {!session && <>
-      Not signed in <br/>
-      <button onClick={() => signIn()}>Sign in</button>
-    </>}
-    {session && <>
+  if(session) {
+    return <>
       Signed in as {session.user.email} <br/>
       <button onClick={() => signOut()}>Sign out</button>
-    </>}
+    </>
+  }
+  return <>
+    Not signed in <br/>
+    <button onClick={() => signIn()}>Sign in</button>
   </>
-}
-`.trim()
+}`.trim()
 
 const serverlessFunctionCode = `
 import NextAuth from 'next-auth'