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.

./components/UserAvatar

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>
  )
}

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.

Page Server Side

./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.

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>
  )
}

import { useSession } from "next-auth/react"
import { UserAvatar } from "@/components/UserAvatar"
 
export default function Dashboard() {
  const session = useSession()
 
  return (
    <nav>
      <UserAvatar session={session} />
    </nav>
  )
}

Finally, we can use it in the component.

./components/UserAvatar

export function UserAvatar({ session }) {
  return (
    <div>
      <img
        src={
          session?.user.image ?? "https://source.boringavatars.com/marble/120"
        }
        alt="User Avatar"
      />
    </div>
  )
}

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.

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

src/routes/+page.server.ts

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.

src/routes/+page.svelte

<script lang="ts">
  import { page } from "$app/stores"
</script>
 
<nav>
  <img
    src={$page.data.session?.user?.image ?? 'https://source.boringavatars.com/marble/120/'}
    alt="User Avatar"
  />
</nav>

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 })
})

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.

Signin and Signout Protecting Resources

Get Session

Page Server Side

Page Client Side

About Auth.js

Download

Acknowledgements