feat(react): create client tailored to React

.gitignore

@@ -40,6 +40,8 @@ src/providers/index.js
 /providers.js
 /errors.js
 /errors.d.ts
+/react.js
+/react.d.ts
 
 # Development app
 app/next-auth

README.md

@@ -116,7 +116,7 @@ export default NextAuth({
 ### Add React Component
 
 ```javascript
-import { useSession, signIn, signOut } from "next-auth/client"
+import { useSession, signIn, signOut } from "next-auth/react"
 
 export default function Component() {
   const [session, loading] = useSession()

app/components/access-denied.js

@@ -1,17 +1,18 @@
-import { signIn } from 'next-auth/client'
+import { signIn } from "next-auth/react"
 
-export default function AccessDenied () {
+export default function AccessDenied() {
   return (
     <>
       <h1>Access Denied</h1>
       <p>
         <a
-          href='/api/auth/signin'
+          href="/api/auth/signin"
           onClick={(e) => {
             e.preventDefault()
             signIn()
           }}
-        >You must be signed in to view this page
+        >
+          You must be signed in to view this page
         </a>
       </p>
     </>

app/components/header.js

@@ -1,17 +1,17 @@
-import Link from 'next/link'
-import { signIn, signOut, useSession } from 'next-auth/client'
-import styles from './header.module.css'
+import Link from "next/link"
+import { signIn, signOut, useSession } from "next-auth/react"
+import styles from "./header.module.css"
 
 // The approach used in this component shows how to built a sign in and sign out
 // component that works on pages which support both client and server side
 // rendering, and avoids any flash incorrect content on initial page load.
-export default function Header () {
+export default function Header() {
   const [session, loading] = useSession()
 
   return (
     <header>
       <noscript>
-        <style>{'.nojs-show { opacity: 1; top: 0; }'}</style>
+        <style>{".nojs-show { opacity: 1; top: 0; }"}</style>
       </noscript>
       <div className={styles.signedInStatus}>
         <p
@@ -25,7 +25,7 @@ export default function Header () {
                 You are not signed in
               </span>
               <a
-                href='/api/auth/signin'
+                href="/api/auth/signin"
                 className={styles.buttonPrimary}
                 onClick={(e) => {
                   e.preventDefault()
@@ -50,7 +50,7 @@ export default function Header () {
                 <strong>{session.user.email || session.user.name}</strong>
               </span>
               <a
-                href='/api/auth/signout'
+                href="/api/auth/signout"
                 className={styles.button}
                 onClick={(e) => {
                   e.preventDefault()
@@ -66,42 +66,42 @@ export default function Header () {
       <nav>
         <ul className={styles.navItems}>
           <li className={styles.navItem}>
-            <Link href='/'>
+            <Link href="/">
               <a>Home</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/client'>
+            <Link href="/client">
               <a>Client</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/server'>
+            <Link href="/server">
               <a>Server</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/protected'>
+            <Link href="/protected">
               <a>Protected</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/protected-ssr'>
+            <Link href="/protected-ssr">
               <a>Protected(SSR)</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/api-example'>
+            <Link href="/api-example">
               <a>API</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/credentials'>
+            <Link href="/credentials">
               <a>Credentials</a>
             </Link>
           </li>
           <li className={styles.navItem}>
-            <Link href='/email'>
+            <Link href="/email">
               <a>Email</a>
             </Link>
           </li>

app/next.config.js

@@ -7,7 +7,7 @@ module.exports = {
       alias: {
         ...config.resolve.alias,
         "next-auth$": path.join(process.cwd(), "next-auth/server"),
-        "next-auth/client$": path.join(process.cwd(), "next-auth/client"),
+        "next-auth/react$": path.join(process.cwd(), "next-auth/client/react"),
         "next-auth/jwt$": path.join(process.cwd(), "next-auth/lib/jwt"),
         "next-auth/adapters": path.join(process.cwd(), "next-auth/adapters"),
         "next-auth/providers": path.join(process.cwd(), "next-auth/providers"),

app/package.json

@@ -15,6 +15,7 @@
   "license": "ISC",
   "dependencies": {
     "next": "^10.1.3",
+    "nodemailer": "^6.6.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

app/pages/_app.js

@@ -1,31 +1,32 @@
-import { Provider } from "next-auth/client"
+import { SessionProvider } from "next-auth/react"
 import "./styles.css"
 
-// Use the <Provider> to improve performance and allow components that call
+// Use the <SessionProvider> to improve performance and allow components that call
 // `useSession()` anywhere in your application to access the `session` object.
-export default function App({ Component, pageProps }) {
+export default function App({
+  Component,
+  pageProps: { session, ...pageProps },
+}) {
   return (
-    <Provider
-      // Provider options are not required but can be useful in situations where
+    <SessionProvider
+      // SessionProvider options are not required but can be useful in situations where
       // you have a short session maxAge time. Shown here with default values.
-      options={{
-        // Client Max Age controls how often the useSession in the client should
-        // contact the server to sync the session state. Value in seconds.
-        // e.g.
-        // * 0  - Disabled (always use cache value)
-        // * 60 - Sync session state with server if it's older than 60 seconds
-        clientMaxAge: 0,
-        // Keep Alive tells windows / tabs that are signed in to keep sending
-        // a keep alive request (which extends the current session expiry) to
-        // prevent sessions in open windows from expiring. Value in seconds.
-        //
-        // Note: If a session has expired when keep alive is triggered, all open
-        // windows / tabs will be updated to reflect the user is signed out.
-        keepAlive: 0,
-      }}
-      session={pageProps.session}
+      // Client Max Age controls how often the useSession in the client should
+      // contact the server to sync the session state. Value in seconds.
+      // e.g.
+      // * 0  - Disabled (always use cache value)
+      // * 60 - Sync session state with server if it's older than 60 seconds
+      staleTime={0}
+      // Keep Alive tells windows / tabs that are signed in to keep sending
+      // a keep alive request (which extends the current session expiry) to
+      // prevent sessions in open windows from expiring. Value in seconds.
+      //
+      // Note: If a session has expired when keep alive is triggered, all open
+      // windows / tabs will be updated to reflect the user is signed out.
+      refetchInterval={0}
+      session={session}
     >
       <Component {...pageProps} />
-    </Provider>
+    </SessionProvider>
   )
 }

app/pages/api/examples/protected.js

@@ -1,12 +1,17 @@
 // This is an example of to protect an API route
-import { getSession } from 'next-auth/client'
+import { getSession } from "next-auth/react"
 
 export default async (req, res) => {
   const session = await getSession({ req })
 
   if (session) {
-    res.send({ content: 'This is protected content. You can access this content because you are signed in.' })
+    res.send({
+      content:
+        "This is protected content. You can access this content because you are signed in.",
+    })
   } else {
-    res.send({ error: 'You must be sign in to view the protected content on this page.' })
+    res.send({
+      error: "You must be sign in to view the protected content on this page.",
+    })
   }
 }

app/pages/api/examples/session.js

@@ -1,5 +1,5 @@
 // This is an example of how to access a session from an API route
-import { getSession } from 'next-auth/client'
+import { getSession } from "next-auth/react"
 
 export default async (req, res) => {
   const session = await getSession({ req })

app/pages/credentials.js

@@ -1,15 +1,15 @@
 // eslint-disable-next-line no-use-before-define
-import * as React from 'react'
-import { signIn, signOut, useSession } from 'next-auth/client'
-import Layout from 'components/layout'
+import * as React from "react"
+import { signIn, signOut, useSession } from "next-auth/react"
+import Layout from "components/layout"
 
-export default function Page () {
+export default function Page() {
   const [response, setResponse] = React.useState(null)
   const handleLogin = (options) => async () => {
     if (options.redirect) {
-      return signIn('credentials', options)
+      return signIn("credentials", options)
     }
-    const response = await signIn('credentials', options)
+    const response = await signIn("credentials", options)
     setResponse(response)
   }
 
@@ -27,27 +27,41 @@ export default function Page () {
     return (
       <Layout>
         <h1>Test different flows for Credentials logout</h1>
-        <span className='spacing'>Default:</span>
-        <button onClick={handleLogout({ redirect: true })}>Logout</button><br />
-        <span className='spacing'>No redirect:</span>
-        <button onClick={handleLogout({ redirect: false })}>Logout</button><br />
+        <span className="spacing">Default:</span>
+        <button onClick={handleLogout({ redirect: true })}>Logout</button>
+        <br />
+        <span className="spacing">No redirect:</span>
+        <button onClick={handleLogout({ redirect: false })}>Logout</button>
+        <br />
         <p>Response:</p>
-        <pre style={{ background: '#eee', padding: 16 }}>{JSON.stringify(response, null, 2)}</pre>
+        <pre style={{ background: "#eee", padding: 16 }}>
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </Layout>
     )
   }
 
   return (
     <Layout>
       <h1>Test different flows for Credentials login</h1>
-      <span className='spacing'>Default:</span>
-      <button onClick={handleLogin({ redirect: true, password: 'password' })}>Login</button><br />
-      <span className='spacing'>No redirect:</span>
-      <button onClick={handleLogin({ redirect: false, password: 'password' })}>Login</button><br />
-      <span className='spacing'>No redirect, wrong password:</span>
-      <button onClick={handleLogin({ redirect: false, password: '' })}>Login</button>
+      <span className="spacing">Default:</span>
+      <button onClick={handleLogin({ redirect: true, password: "password" })}>
+        Login
+      </button>
+      <br />
+      <span className="spacing">No redirect:</span>
+      <button onClick={handleLogin({ redirect: false, password: "password" })}>
+        Login
+      </button>
+      <br />
+      <span className="spacing">No redirect, wrong password:</span>
+      <button onClick={handleLogin({ redirect: false, password: "" })}>
+        Login
+      </button>
       <p>Response:</p>
-      <pre style={{ background: '#eee', padding: 16 }}>{JSON.stringify(response, null, 2)}</pre>
+      <pre style={{ background: "#eee", padding: 16 }}>
+        {JSON.stringify(response, null, 2)}
+      </pre>
     </Layout>
   )
 }

app/pages/email.js

@@ -1,11 +1,11 @@
 // eslint-disable-next-line no-use-before-define
-import * as React from 'react'
-import { signIn, signOut, useSession } from 'next-auth/client'
-import Layout from 'components/layout'
+import * as React from "react"
+import { signIn, signOut, useSession } from "next-auth/react"
+import Layout from "components/layout"
 
-export default function Page () {
+export default function Page() {
   const [response, setResponse] = React.useState(null)
-  const [email, setEmail] = React.useState('')
+  const [email, setEmail] = React.useState("")
 
   const handleChange = (event) => {
     setEmail(event.target.value)
@@ -15,9 +15,9 @@ export default function Page () {
     event.preventDefault()
 
     if (options.redirect) {
-      return signIn('email', options)
+      return signIn("email", options)
     }
-    const response = await signIn('email', options)
+    const response = await signIn("email", options)
     setResponse(response)
   }
 
@@ -35,33 +35,46 @@ export default function Page () {
     return (
       <Layout>
         <h1>Test different flows for Email logout</h1>
-        <span className='spacing'>Default:</span>
-        <button onClick={handleLogout({ redirect: true })}>Logout</button><br />
-        <span className='spacing'>No redirect:</span>
-        <button onClick={handleLogout({ redirect: false })}>Logout</button><br />
+        <span className="spacing">Default:</span>
+        <button onClick={handleLogout({ redirect: true })}>Logout</button>
+        <br />
+        <span className="spacing">No redirect:</span>
+        <button onClick={handleLogout({ redirect: false })}>Logout</button>
+        <br />
         <p>Response:</p>
-        <pre style={{ background: '#eee', padding: 16 }}>{JSON.stringify(response, null, 2)}</pre>
+        <pre style={{ background: "#eee", padding: 16 }}>
+          {JSON.stringify(response, null, 2)}
+        </pre>
       </Layout>
     )
   }
 
   return (
     <Layout>
       <h1>Test different flows for Email login</h1>
-      <label className='spacing'>
-        Email address:{' '}
-        <input type='text' id='email' name='email' value={email} onChange={handleChange} />
-      </label><br />
+      <label className="spacing">
+        Email address:{" "}
+        <input
+          type="text"
+          id="email"
+          name="email"
+          value={email}
+          onChange={handleChange}
+        />
+      </label>
+      <br />
       <form onSubmit={handleLogin({ redirect: true, email })}>
-        <span className='spacing'>Default:</span>
-        <button type='submit'>Sign in with Email</button>
+        <span className="spacing">Default:</span>
+        <button type="submit">Sign in with Email</button>
       </form>
       <form onSubmit={handleLogin({ redirect: false, email })}>
-        <span className='spacing'>No redirect:</span>
-        <button type='submit'>Sign in with Email</button>
+        <span className="spacing">No redirect:</span>
+        <button type="submit">Sign in with Email</button>
       </form>
       <p>Response:</p>
-      <pre style={{ background: '#eee', padding: 16 }}>{JSON.stringify(response, null, 2)}</pre>
+      <pre style={{ background: "#eee", padding: 16 }}>
+        {JSON.stringify(response, null, 2)}
+      </pre>
     </Layout>
   )
 }