Example: with-next-auth updated to v3 (#17266)

Update [`next-auth`](https://github.com/iaincollins/next-auth) from `^2.1.0` to `^3.1.0` and minor sqlite bump to `^5.0.0`.

examples/with-next-auth/.env.local.example

@@ -1,11 +1,13 @@
-GOOGLE_ID=
-GOOGLE_SECRET=
-FACEBOOK_ID=
-FACEBOOK_SECRET=
-TWITTER_ID=
-TWITTER_SECRET=
-GITHUB_ID=
-GITHUB_SECRET=
-EMAIL_SERVER=smtp://username:password@smtp.example.com.com:587
-EMAIL_FROM=NextAuth <noreply@example.com>
-DATABASE_URL=sqlite://localhost/:memory:?synchronize=true
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_TWITTER_ID=
+NEXTAUTH_TWITTER_SECRET=
+NEXTAUTH_GITHUB_ID=
+NEXTAUTH_GITHUB_SECRET=
+NEXTAUTH_GOOGLE_ID=
+NEXTAUTH_GOOGLE_SECRET=
+NEXTAUTH_FACEBOOK_ID=
+NEXTAUTH_FACEBOOK_SECRET=
+NEXTAUTH_EMAIL_SERVER=smtp://username:password@smtp.example.com:587
+NEXTAUTH_EMAIL_FROM=NextAuth <noreply@example.com>
+NEXTAUTH_DATABASE_URL=sqlite://localhost/:memory:?synchronize=true
+

examples/with-next-auth/README.md

@@ -26,4 +26,4 @@ yarn create next-app --example with-next-auth with-next-auth-app
 
 Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
 
-**Note:** For production you need to know in advance the domain (deployment URL) of your application, as it would be required for OAuth to work, once you have it set it to the `VERCEL_URL` environment variable under the settings of your Vercel project.
+**Note:** For production you need to know in advance the domain (deployment URL) of your application, as it would be required for OAuth to work, once you have it set it to the `NEXTAUTH_URL` environment variable under the settings of your Vercel project.

examples/with-next-auth/package.json

@@ -9,9 +9,9 @@
   "license": "MIT",
   "dependencies": {
     "next": "latest",
-    "next-auth": "^2.1.0",
+    "next-auth": "^3.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "sqlite3": "^4.2.0"
+    "sqlite3": "^5.0.0"
   }
 }

examples/with-next-auth/pages/_app.js

@@ -4,7 +4,7 @@ import '../styles.css'
 const App = ({ Component, pageProps }) => {
   const { session } = pageProps
   return (
-    <Provider options={{ site: process.env.SITE }} session={session}>
+    <Provider session={session}>
       <Component {...pageProps} />
     </Provider>
   )

examples/with-next-auth/pages/api/auth/[...nextauth].js

@@ -2,97 +2,118 @@ import NextAuth from 'next-auth'
 import Providers from 'next-auth/providers'
 
 const options = {
-  site: process.env.VERCEL_URL,
+  // @link https://next-auth.js.org/configuration/providers
   providers: [
     Providers.Email({
       // SMTP connection string or nodemailer configuration object https://nodemailer.com/
-      server: process.env.EMAIL_SERVER,
+      server: process.env.NEXTAUTH_EMAIL_SERVER,
       // Email services often only allow sending email from a valid/verified address
-      from: process.env.EMAIL_FROM,
+      from: process.env.NEXTAUTH_EMAIL_FROM,
     }),
     // When configuring oAuth providers make sure you enabling requesting
     // permission to get the users email address (required to sign in)
     Providers.Google({
-      clientId: process.env.GOOGLE_ID,
-      clientSecret: process.env.GOOGLE_SECRET,
+      clientId: process.env.NEXTAUTH_GOOGLE_ID,
+      clientSecret: process.env.NEXTAUTH_GOOGLE_SECRET,
     }),
     Providers.Facebook({
-      clientId: process.env.FACEBOOK_ID,
-      clientSecret: process.env.FACEBOOK_SECRET,
+      clientId: process.env.NEXTAUTH_FACEBOOK_ID,
+      clientSecret: process.env.NEXTAUTH_FACEBOOK_SECRET,
     }),
     Providers.Twitter({
-      clientId: process.env.TWITTER_ID,
-      clientSecret: process.env.TWITTER_SECRET,
+      clientId: process.env.NEXTAUTH_TWITTER_ID,
+      clientSecret: process.env.NEXTAUTH_TWITTER_SECRET,
     }),
     Providers.GitHub({
-      clientId: process.env.GITHUB_ID,
-      clientSecret: process.env.GITHUB_SECRET,
+      clientId: process.env.NEXTAUTH_GITHUB_ID,
+      clientSecret: process.env.NEXTAUTH_GITHUB_SECRET,
     }),
   ],
-  // The 'database' option should be a connection string or TypeORM
-  // configuration object https://typeorm.io/#/connection-options
-  //
-  // Notes:
-  // * You need to install an appropriate node_module for your database!
-  // * The email sign in provider requires a database but OAuth providers do not
-  database: process.env.DATABASE_URL,
 
+  // @link https://next-auth.js.org/configuration/databases
+  database: process.env.NEXTAUTH_DATABASE_URL,
+
+  // @link https://next-auth.js.org/configuration/options#session
   session: {
     // Use JSON Web Tokens for session instead of database sessions.
     // This option can be used with or without a database for users/accounts.
     // Note: `jwt` is automatically set to `true` if no database is specified.
-    // jwt: false,
+    // jwt: true,
     // Seconds - How long until an idle session expires and is no longer valid.
     // maxAge: 30 * 24 * 60 * 60, // 30 days
     // Seconds - Throttle how frequently to write to database to extend a session.
     // Use it to limit write operations. Set to 0 to always update the database.
     // Note: This option is ignored if using JSON Web Tokens
     // updateAge: 24 * 60 * 60, // 24 hours
-    // Easily add custom properties to response from `/api/auth/session`.
-    // Note: This should not return any sensitive information.
-    /*
-    get: async (session) => {
-      session.customSessionProperty = "ABC123"
-      return session
-    }
-    */
   },
 
-  // JSON Web Token options
+  // @link https://next-auth.js.org/configuration/options#jwt
   jwt: {
-    // secret: 'my-secret-123', // Recommended (but auto-generated if not specified)
-    // Custom encode/decode functions for signing + encryption can be specified.
-    // if you want to override what is in the JWT or how it is signed.
-    // encode: async ({ secret, key, token, maxAge }) => {},
-    // decode: async ({ secret, key, token, maxAge }) => {},
-    // Easily add custom to the JWT. It is updated every time it is accessed.
-    // This is encrypted and signed by default and may contain sensitive information
-    // as long as a reasonable secret is defined.
-    /*
-    set: async (token) => {
-      token.customJwtProperty = "ABC123"
-      return token
-    }
-    */
+    // A secret to use for key generation - you should set this explicitly
+    // Defaults to NextAuth.js secret if not explicitly specified.
+    // secret: 'INp8IvdIyeMcoGAgFGoA61DdBglwwSqnXJZkgz8PSnw',
+    // Set to true to use encryption. Defaults to false (signing only).
+    // encryption: true,
+    // You can define your own encode/decode functions for signing and encryption
+    // if you want to override the default behaviour.
+    // encode: async ({ secret, token, maxAge }) => {},
+    // decode: async ({ secret, token, maxAge }) => {},
   },
 
-  // Control which users / accounts can sign in
-  // You can use this option in conjunction with OAuth and JWT to control which
-  // accounts can sign in without having to use a database.
-  allowSignin: async (user, account) => {
-    // Return true if user / account is allowed to sign in.
-    // Return false to display an access denied message.
-    return true
+  // @link https://next-auth.js.org/configuration/callbacks
+  callbacks: {
+    /**
+     * Intercept signIn request and return true if the user is allowed.
+     *
+     * @link https://next-auth.js.org/configuration/callbacks#sign-in-callback
+     * @param  {object} user     User object
+     * @param  {object} account  Provider account
+     * @param  {object} profile  Provider profile
+     * @return {boolean}         Return `true` (or a modified JWT) to allow sign in
+     *                           Return `false` to deny access
+     */
+    signIn: async (user, account, profile) => {
+      return true
+    },
+
+    /**
+     * @link https://next-auth.js.org/configuration/callbacks#session-callback
+     * @param  {object} session      Session object
+     * @param  {object} user         User object    (if using database sessions)
+     *                               JSON Web Token (if not using database sessions)
+     * @return {object}              Session that will be returned to the client
+     */
+    session: async (session, user) => {
+      //session.customSessionProperty = 'bar'
+      return Promise.resolve(session)
+    },
+
+    /**
+     * @link https://next-auth.js.org/configuration/callbacks#jwt-callback
+     * @param  {object}  token     Decrypted JSON Web Token
+     * @param  {object}  user      User object      (only available on sign in)
+     * @param  {object}  account   Provider account (only available on sign in)
+     * @param  {object}  profile   Provider profile (only available on sign in)
+     * @param  {boolean} isNewUser True if new user (only available on sign in)
+     * @return {object}            JSON Web Token that will be saved
+     */
+    jwt: async (token, user, account, profile, isNewUser) => {
+      //const isSignIn = (user) ? true : false
+      // Add auth_time to token on signin in
+      //if (isSignIn) { token.auth_time = Math.floor(Date.now() / 1000) }
+      return Promise.resolve(token)
+    },
   },
 
   // You can define custom pages to override the built-in pages
   // The routes shown here are the default URLs that will be used.
+  // @link https://next-auth.js.org/configuration/pages
   pages: {
-    // signin: '/api/auth/signin',  // Displays signin buttons
-    // signout: '/api/auth/signout', // Displays form with sign out button
-    // error: '/api/auth/error', // Error code passed in query string as ?error=
-    // verifyRequest: '/api/auth/verify-request', // Used for check email page
-    // newUser: null // If set, new users will be directed here on first sign in
+    //signIn: '/api/auth/signin',
+    //signOut: '/api/auth/signout',
+    //error: '/api/auth/error', // Error code passed in query string as ?error=
+    //verifyRequest: '/api/auth/verify-request', // (used for check email message)
+    //newUser: null // If set, new users will be directed here on first sign in
   },
 
   // Additional options