import { Callout } from "nextra/components"
import { Code } from "@/components/Code"

# Get Session

Once a user is logged in, you often want to get the session object in order to use the data in some way. A common use-case is to show their profile picture or display some other user information.

<Code>
<Code.Next>

```tsx filename="./components/UserAvatar.tsx" {4} /async/
import { auth } from "../auth"

export default async function UserAvatar() {
  const session = await auth()

  if (!session?.user) return null

  return (
    <div>
      <img src={session.user.image} alt="User Avatar" />
    </div>
  )
}
```

</Code.Next>
<Code.NextClient>

Although `next-auth` supports client-side data retrieval using `useSession` and `SessionProvider` for both the App Router and Pages Router, in real-world scenarios, these are used less frequently. Typically, you'll want to take full advantage of server-side rendering to optimize performance and security.

### App Router

```tsx filename="app/admin/dashboard.tsx"
"use client"
import { useSession } from "next-auth/react"

export default function Dashboard() {
  const { data: session } = useSession()

  if (session?.user?.role === "admin") {
    return <p>You are an admin, welcome!</p>
  }

  return <p>You are not authorized to view this page!</p>
}
```

```tsx filename="app/admin/page.tsx"
import { SessionProvider } from "next-auth/react"
import { Dashboard } from "./Dashboard"

export default function Administrator() {
  return (
    <SessionProvider>
      <Dashboard />
    </SessionProvider>
  )
}
```

### Page Server Side

In the pages router, to access a session in a component, you'll first need to get the `session` object in a page and then pass it down to the component.

```tsx filename="./pages/dashboard.tsx"
import { auth } from "@/auth.ts"
import { UserAvatar } from "@/components/UserAvatar"

export default function Dashboard({ session }) {
  return (
    <nav>
      <UserAvatar session={session} />
    </nav>
  )
}

export async function getServerSideProps(ctx) {
  const session = await auth(ctx)

  return {
    props: {
      session,
    },
  }
}
```

### Page Client Side

When accessing the session client-side using `useSession()`, make sure an Auth.js `<SessionProvider />` is
wrapping your page.

```tsx filename="pages/_app.tsx"
import type { AppProps } from "next/app"
import { SessionProvider } from "next-auth/react"

export default function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />;
    </SessionProvider>
  )
}
```

```tsx filename="pages/dashboard.tsx"
import { useSession } from "next-auth/react"
import { UserAvatar } from "@/components/UserAvatar"

export default function Dashboard() {
  const { data: session } = useSession()

  return (
    <nav>
      <UserAvatar session={session} />
    </nav>
  )
}
```

Finally, we can use it in the component.

```tsx filename="./components/UserAvatar.tsx" /session/
import type { Session } from "next-auth"

export function UserAvatar({ session }: { session: Session | null }) {
  return (
    <div>
      <img
        src={session?.user?.image ?? "https://i.pravatar.cc/300"}
        alt="User Avatar"
      />
    </div>
  )
}
```

</Code.NextClient>
<Code.Qwik>

Under the hood Qwik is preparing automatically the session for you so you don't have to implement custom logic for that.
You can read the sesion on the server with `event.sharedMap.get("session")` and on the client with the `useSession()` action.

</Code.Qwik>
<Code.Svelte>

With SvelteKit, you have to return the `session` object from the load function in your `+page.server.ts` or `+layout.server.ts` files.

```ts filename="src/routes/+page.server.ts" {11}
import type { PageServerLoad } from "./$types"

export const load: PageServerLoad = async (events) => {
  const session = await events.locals.auth()

  if (!session?.user?.userId) {
    redirect(303, `/login`)
  }

  return {
    session,
  }
}
```

Then you can access the `session` on the `$page.data` object in your page.

```svelte filename="src/routes/+page.svelte" {7}
<script lang="ts">
  import { page } from "$app/stores"
</script>

<nav>
  <img
    src={$page.data.session?.user?.image ?? "https://i.pravatar.cc/300"}
    alt="User Avatar"
  />
</nav>
```

</Code.Svelte>
<Code.Express>

```ts filename="app.ts"
import { getSession } from "@auth/express"

export function authSession(req: Request, res: Response, next: NextFunction) {
  res.locals.session = await getSession(req)
  next()
}

app.use(authSession)

// Now in your route
app.get("/", (req, res) => {
  const { session } = res.locals
  res.render("index", { user: session?.user })
})
```

</Code.Express>
</Code>

If you'd like to extend your session with more fields from your OAuth provider, for example, please check out our ["extending the session" guide](/guides/extending-the-session).
