mirror of
https://github.com/SrIzan10/next-auth.git
synced 2026-05-01 10:55:20 +00:00
a2e5afa162
A living session could be a requirement for specific pages (like dashboards). If it doesn’t exist, the user should be redirected to a page asking them to sign in again.
Sometimes, a user might log out by accident, or by deleting cookies on purpose. If that happens (e.g. on a separate tab), then `useSession({ required: true })` should detect the absence of a session cookie and always return a non-nullable Session object type.
When `required: true` is set, the default behavior will be to redirect the user to the sign-in page. This can be overridden by an `action()` callback:
```js
const session = useSession({
required: true,
action() {
// ....
}
})
if (session.status === "Loading") return "Loading or not authenticated..."
// session.data is always defined here.
```
Co-authored-by: Kristóf Poduszló <kripod@protonmail.com>
Co-authored-by: Lluis Agusti <hi@llu.lu>
BREAKING CHANGE:
The `useSession` hook now returns an object. Here is how to accommodate for this change:
```diff
- const [ session, loading ] = useSession()
+ const { data: session, status } = useSession()
+ const loading = status === "loading"
```
With the new `status` option, you can test states much more clearly.
113 lines
3.2 KiB
JavaScript
113 lines
3.2 KiB
JavaScript
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() {
|
|
const { data: session, status } = useSession()
|
|
|
|
return (
|
|
<header>
|
|
<noscript>
|
|
<style>{".nojs-show { opacity: 1; top: 0; }"}</style>
|
|
</noscript>
|
|
<div className={styles.signedInStatus}>
|
|
<p
|
|
className={`nojs-show ${
|
|
!session && status === "loading" ? styles.loading : styles.loaded
|
|
}`}
|
|
>
|
|
{!session && (
|
|
<>
|
|
<span className={styles.notSignedInText}>
|
|
You are not signed in
|
|
</span>
|
|
<a
|
|
href="/api/auth/signin"
|
|
className={styles.buttonPrimary}
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
signIn()
|
|
}}
|
|
>
|
|
Sign in
|
|
</a>
|
|
</>
|
|
)}
|
|
{session && (
|
|
<>
|
|
{session.user.image && (
|
|
<span
|
|
style={{ backgroundImage: `url(${session.user.image})` }}
|
|
className={styles.avatar}
|
|
/>
|
|
)}
|
|
<span className={styles.signedInText}>
|
|
<small>Signed in as</small>
|
|
<br />
|
|
<strong>{session.user.email || session.user.name}</strong>
|
|
</span>
|
|
<a
|
|
href="/api/auth/signout"
|
|
className={styles.button}
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
signOut()
|
|
}}
|
|
>
|
|
Sign out
|
|
</a>
|
|
</>
|
|
)}
|
|
</p>
|
|
</div>
|
|
<nav>
|
|
<ul className={styles.navItems}>
|
|
<li className={styles.navItem}>
|
|
<Link href="/">
|
|
<a>Home</a>
|
|
</Link>
|
|
</li>
|
|
<li className={styles.navItem}>
|
|
<Link href="/client">
|
|
<a>Client</a>
|
|
</Link>
|
|
</li>
|
|
<li className={styles.navItem}>
|
|
<Link href="/server">
|
|
<a>Server</a>
|
|
</Link>
|
|
</li>
|
|
<li className={styles.navItem}>
|
|
<Link href="/protected">
|
|
<a>Protected</a>
|
|
</Link>
|
|
</li>
|
|
<li className={styles.navItem}>
|
|
<Link href="/protected-ssr">
|
|
<a>Protected(SSR)</a>
|
|
</Link>
|
|
</li>
|
|
<li className={styles.navItem}>
|
|
<Link href="/api-example">
|
|
<a>API</a>
|
|
</Link>
|
|
</li>
|
|
<li className={styles.navItem}>
|
|
<Link href="/credentials">
|
|
<a>Credentials</a>
|
|
</Link>
|
|
</li>
|
|
<li className={styles.navItem}>
|
|
<Link href="/email">
|
|
<a>Email</a>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
)
|
|
}
|