Update documentation (#786)

* Improved homepage and getting started guide
* Improved experience viewing docs on mobile devices
* Fixed typos

www/docs/configuration/callbacks.md

@@ -38,7 +38,7 @@ The documentation below shows how to implement each callback, their default beha
 
 Use the `signIn()` callback to control if a user is allowed to sign in.
 
-```js title="pages/api/auth/[...nextauth.js]"
+```js title="pages/api/auth/[...nextauth].js"
 callbacks: {
   /**
    * @param  {object} user     User object
@@ -88,7 +88,7 @@ The redirect callback is called anytime the user is redirected to a callback URL
 
 By default only URLs on the same URL as the site are allowed, you can use the redirect callback to customise that behaviour.
 
-```js title="pages/api/auth/[...nextauth.js]"
+```js title="pages/api/auth/[...nextauth].js"
 callbacks: {
   /**
    * @param  {string} url      URL provided as callback URL by the client
@@ -117,7 +117,7 @@ e.g. `getSession()`, `useSession()`, `/api/auth/session`
 * When using database sessions, the User object is passed as an argument.
 * When using JSON Web Tokens for sessions, the JWT payload is provided instead.
 
-```js title="pages/api/auth/[...nextauth.js]"
+```js title="pages/api/auth/[...nextauth].js"
 callbacks: {
   /**
    * @param  {object} session      Session object
@@ -157,7 +157,7 @@ e.g. `/api/auth/signin`, `getSession()`, `useSession()`, `/api/auth/session`
 
 The contents *user*, *account*, *profile* and *isNewUser* will vary depending on the provider and on if you are using a database or not. If you want to pass data such as User ID, OAuth Access Token, etc. to the browser, you can persist it in the token and use the `session()` callback to return it.
 
-```js title="pages/api/auth/[...nextauth.js]"
+```js title="pages/api/auth/[...nextauth].js"
 callbacks: {
   /**
    * @param  {object}  token     Decrypted JSON Web Token

www/docs/configuration/providers.md

@@ -3,13 +3,15 @@ id: providers
 title: Providers
 ---
 
-Authentication Providers in NextAuth.js are how you define services can be used to sign in.
+Authentication Providers in NextAuth.js are how you define services that can be used to sign in.
 
-NextAuth.js is designed to work with any OAuth service, it supports OAuth 1.0, 1.0A and 2.0 and has built-in support for many popular OAuth sign-in services. It also supports email / passwordless authentication.
+This includes, OAuth, email / passwordless and other other services.
 
 ## Sign in with OAuth
 
-### Built-in providers
+NextAuth.js is designed to work with any OAuth service, it supports OAuth 1.0, 1.0A and 2.0 and has built-in support for many popular OAuth sign-in services.
+
+### Built-in OAuth providers
 
 * [Apple](/providers/apple)
 * [Atlassian](/providers/atlassian)
@@ -20,6 +22,7 @@ NextAuth.js is designed to work with any OAuth service, it supports OAuth 1.0, 1
 * [Amazon Cognito](/providers/cognito)
 * [Discord](/providers/discord)
 * [Facebook](/providers/facebook)
+* [FusionAuth](/providers/fusionauth)
 * [GitHub](/providers/github)
 * [GitLab](/providers/gitlab)
 * [Google](/providers/google)
@@ -33,7 +36,7 @@ NextAuth.js is designed to work with any OAuth service, it supports OAuth 1.0, 1
 * [Twitter](/providers/twitter)
 * [Yandex](/providers/yandex)
 
-### Using a built-in provider
+### Using a built-in OAuth provider
 
 1. Register your application at the developer portal of your provider. There are links above to the developer docs for most supported providers with details on how to register your application.
 

www/docs/getting-started/example.md

@@ -1,22 +1,22 @@
 ---
 id: example
-title: Example
+title: Example Code
 ---
 
-### Check out the example project
+## Get started with NextAuth.js
 
-The easiest way to get started is to clone the [example application](https://github.com/iaincollins/next-auth-example) and follow the instructions in the [README](https://github.com/iaincollins/next-auth-example/blob/main/README.md).
+The example code below describes to add authentication to a Next.js app.
 
-You can find a live demo of the example project at [next-auth-example.now.sh](https://next-auth-example.now.sh)
-
-## Add to an existing project
-
-*The example code below shows how to add authentication to an existing Next.js project.*
+:::tip
+The easiest way to get started is to clone the [example app](https://github.com/iaincollins/next-auth-example) and follow the instructions in README.md. You can try out a live demo at [next-auth-example.now.sh](https://next-auth-example.now.sh)
+:::
 
 ### Add API route
 
 To add NextAuth.js to a project create a file called `[...nextauth].js` in `pages/api/auth`.
 
+[Read more about how to add authentication providers.](/configuration/providers)
+
 ```javascript title="pages/api/auth/[...nextauth].js"
 import NextAuth from 'next-auth'
 import Providers from 'next-auth/providers'
@@ -68,13 +68,11 @@ export default function Page() {
 }
 ```
 
-***That's all the code you need to add authentication with NextAuth.js to a project!***
-
 :::tip
 You can use the `useSession` hook from anywhere in your application (e.g. in a header component).
 :::
 
-### Add to all pages
+### Add session state
 
 To allow session state to be shared between pages - which improves performance, reduces network traffic and avoids component state changes while rendering - you can use the NextAuth.js Provider in `pages/_app.js`.
 
@@ -94,7 +92,7 @@ export default function App ({ Component, pageProps }) {
 Check out the [client documentation](/getting-started/client) to see how you can improve the user experience and page performance by using the NextAuth.js client.
 :::
 
-### Deploying
+### Deploying to production
 
 When deploying your site set the `NEXTAUTH_URL` environment variable to the canonical URL of the website.
 
@@ -103,5 +101,7 @@ NEXTAUTH_URL=https://example.com
 ```
 
 :::tip
+In production, this needs to be set as an environment variable on the service you use to deploy your app.
+
 To set environment variables on Vercel, you can use the [dashboard](https://vercel.com/dashboard) or the `now env` command.
 :::

www/docs/schemas/adapters.md

@@ -13,6 +13,7 @@ Configure your database by creating the tables and columns to match the schema e
 
 * [MySQL Schema](/schemas/mysql)
 * [Postgres Schema](/schemas/postgres)
+* [Microsoft SQL Server Schema](/schemas/mssql)
 
 ## TypeORM Adapter
 

www/docusaurus.config.js

@@ -111,7 +111,7 @@ module.exports = {
           editUrl: 'https://github.com/iaincollins/next-auth/edit/main/www'
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css')
+          customCss: require.resolve('./src/css/index.css')
         }
       }
     ]

www/src/css/custom.css → www/src/css/index.css

@@ -26,6 +26,8 @@
   --ifm-footer-background-color: #f9f9f9;
   --ifm-hero-background-color: #f5f5f5;
   --ifm-navbar-background-color: rgba(255,255,255,0.95);
+  --ifm-h1-font-size: 3rem;
+  --ifm-h1-font-size: 2rem;
 }
 
 html[data-theme='dark']:root {
@@ -124,10 +126,11 @@ a:hover,
 .home-subtitle {
   justify-content: center;
   padding: 0rem 0 2rem 0;
-  opacity: 0.8;
+  opacity: 0.6;
   font-style: italic;
-  margin: 0;
+  margin: 0 auto;
   font-size: 1.2rem;
+  text-align: center;
 }
 
 .home-main .code {
@@ -149,6 +152,12 @@ a:hover,
   width: 100%;
 }
 
+.home-main .code .code-heading span {
+  opacity: 0.6;
+  float: right;
+  font-weight: normal;
+}
+
 .home-main .col {
   margin-bottom: 1.5rem;
 }
@@ -234,31 +243,32 @@ html[data-theme='dark'] {
   zoom: .80;
 }
 
-/* Targets the 'Documentation' button on mobile */
-/* The UX is pretty poor but doing the best we can with it! */
-.button.button--secondary.button--sm.menu__button {
-  position: fixed;
-  right: 1rem;
-  bottom: 1rem;
-  z-index: 1000;
-  width: auto;
-  padding: 0.5rem 1rem;
-  border-radius: 2rem;
-  border: none;
-  background: #fff;
-  box-shadow: 0 0 1rem rgba(0,0,0,0.2);
-}
+@media screen and (max-width: 996px) {
+  /* Targets the 'Documentation' button on mobile */
+  /* The UX is pretty poor but doing the best we can with it! */
+  .button.button--secondary.button--sm.menu__button {
+    position: relative;
+    top: 0;
+    width: 100%;
+    background: none;
+    box-shadow: none;
+    font-size: 1rem !important;
+    color: #000;
+    text-align: left;
+    padding: .1rem 2rem;
+    text-decoration: underline;
+    font-weight: bold;
+    display: inline;
+    opacity: 1;
+  }
 
-html[data-theme='dark'] .button.button--secondary.button--sm.menu__button {
-  background: #242526;
-  color: #fff;
-  box-shadow: 0 0 1rem rgba(0,0,0,0.4);
-}
+  html[data-theme='dark'] .button.button--secondary.button--sm.menu__button {
+    color: #fff;
+  }
 
-.button.button--secondary.button--sm.menu__button:before {
-  font-size: 2rem;
-  line-height: 2rem;
-  content: "?";
-  opacity: 0.8;
-  display: block;
+  .button.button--secondary.button--sm.menu__button:before {
+    content: "Documentation";
+    opacity: 0.8;
+    display: block;
+  }
 }

www/src/css/sidebar.css

@@ -1,7 +1,6 @@
 /* Targets sidebar (left hand side) */
 .main-wrapper > div > div {
   border-right: none !important;
-  background: var(--ifm-footer-background-color);
 }
 
 .menu__list .menu__list-item a[href="#!"],
@@ -11,7 +10,7 @@
 }
 
 .menu__list .menu__list-item a:not(.menu__link--sublist) {
-  font-weight: 500;
+  font-weight: 400;
 }
 
 .menu__list .menu__list-item a:not(.menu__link--sublist):hover {
@@ -47,7 +46,9 @@ html[data-theme='dark'] .menu__list .menu__list-item a[href="#!"] {
 @media screen and (max-width: 996px) {
   .menu.menu--responsive {
     top: 3.5rem;
+    overflow: auto;
     padding: 0;
+    background: var(--ifm-background-color);
   }
   .navbar {
     z-index: 1000 !important;

www/src/pages/index.js

@@ -7,7 +7,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
 import CodeBlock from '@theme/CodeBlock'
 import ProviderMarquee from '../components/ProviderMarquee'
 import Seo from './seo'
-import styles from './styles.module.css'
+import styles from './index.module.css'
 
 const features = [
   {
@@ -149,21 +149,21 @@ function Home () {
               </div>
               <div className='row'>
                 <div className='col'>
-                  <h2 className='text--center'>
+                  <h2 className='text--center' style={{ fontSize: '2.5rem' }}>
                     Add authentication in minutes!
                   </h2>
                 </div>
               </div>
               <div className='row'>
                 <div className='col col--6'>
                   <div className='code'>
-                    <h4 className='code-heading'>Server</h4>
+                    <h4 className='code-heading'>Server <span>/pages/api/auth/[...nextauth].js</span></h4>
                     <CodeBlock className='javascript'>{serverlessFunctionCode}</CodeBlock>
                   </div>
                 </div>
                 <div className='col col--6'>
                   <div className='code'>
-                    <h4 className='code-heading'>Client</h4>
+                    <h4 className='code-heading'>Client <span>/pages/index.js</span></h4>
                     <CodeBlock className='javascript'>{reactComponentCode}</CodeBlock>
                   </div>
                 </div>
@@ -174,17 +174,16 @@ function Home () {
                     <Link
                       to='/getting-started/example'
                       className='button button--primary button--lg rounded-pill'
-                    >Get Started
+                    >Example Code
                     </Link>
                   </p>
                 </div>
               </div>
             </div>
           </section>
-          <div className='container'>
-            <div className='row home-subtitle'>
-              {siteConfig.title} is not affiliated with Vercel or Next.js
-            </div>
+          <div className='home-subtitle'>
+            <p>NextAuth.js is an open source community project.</p>
+            <p>NextAuth.js is not affiliated with Vercel or Next.js</p>
           </div>
         </main>
       </div>
@@ -222,7 +221,7 @@ import Providers from 'next-auth/providers'
 
 const options = {
   providers: [
-    // OAuth authentication providers
+    // OAuth authentication providers...
     Providers.Apple({
       clientId: process.env.APPLE_ID,
       clientSecret: process.env.APPLE_SECRET
@@ -235,13 +234,13 @@ const options = {
       clientId: process.env.GOOGLE_ID,
       clientSecret: process.env.GOOGLE_SECRET
     }),
-    // Sign in with email
+    // Passwordless / email sign in
     Providers.Email({
       server: process.env.MAIL_SERVER,
       from: 'NextAuth.js <no-reply@example.com>'
     }),
   ],
-  // SQL or MongoDB database (or leave empty)
+  // Optional SQL or MongoDB database to persist users
   database: process.env.DATABASE_URL
 }
 

www/src/pages/styles.module.css → www/src/pages/index.module.css

@@ -102,4 +102,4 @@
 .featureImage {
   height: 220px;
   width: 220px;
-}
+}