User and Session Management

Learn how to access user and session information in ShipNowKit applications.

Accessing Users and Sessions

You can access user and session information in your application through the useSession hook.

Client Components

In client components, use the useSession hook:

import { useSession } from "@/lib/auth-client";

export function MyComponent() {
  const { data: session, isPending } = useSession();
  
  // session may be null (if user is not authenticated)
  // but in protected routes, session should always exist
  
  if (isPending) {
    return <div>Loading...</div>;
  }
  
  if (!session) {
    return <div>Please sign in</div>;
  }
  
  return (
    <div>
      <p>User name: {session.user.name}</p>
      <p>User email: {session.user.email}</p>
    </div>
  );
}

The session object contains the following information:

user - Information about the authenticated user
session - Session data

Waiting for Session to Load

In some cases, you may need to wait for the session to load before accessing user and session information. You can use the isPending property:

import { useSession } from "@/lib/auth-client";

export function MyComponent() {
  const { data: session, isPending } = useSession();
  
  if (isPending) {
    return <div>Loading...</div>;
  }
  
  // At this point, session has finished loading
  if (!session) {
    return <div>Please sign in</div>;
  }
  
  return <div>Welcome, {session.user.name}!</div>;
}

Server-Side Session Access

In server components (RSC), use the getSession function:

import { getSession } from "@/lib/actions/auth";
import { redirect } from "next/navigation";

export default async function ServerComponent() {
  const session = await getSession();
  
  if (!session) {
    redirect("/signin");
  }
  
  return (
    <div>
      <p>User name: {session.user.name}</p>
      <p>User email: {session.user.email}</p>
    </div>
  );
}

Session Data Structure

User Type

type User = {
  id: string;
  createdAt: Date;
  updatedAt: Date;
  email: string;
  emailVerified: boolean;
  name: string | null;
  image: string | null;
}

Session Type

type Session = {
  id: string;
  userId: string;
  createdAt: Date;
  updatedAt: Date;
  expiresAt: Date;
  token: string;
  ipAddress?: string | null;
  userAgent?: string | null;
}

Checking if User is Signed In

Client-Side

import { useSession } from "@/lib/auth-client";

export function MyComponent() {
  const { data: session } = useSession();
  
  if (!session) {
    return <div>Please sign in</div>;
  }
  
  return <div>Signed in user: {session.user.email}</div>;
}

Server-Side

import { getSession } from "@/lib/actions/auth";
import { redirect } from "next/navigation";

export default async function MyPage() {
  const session = await getSession();
  
  if (!session) {
    redirect("/signin");
  }
  
  return <div>Signed in user: {session.user.email}</div>;
}

Learn how to access user and session information in ShipNowKit applications.

Accessing Users and Sessions

You can access user and session information in your application through the useSession hook.

Client Components

In client components, use the useSession hook:

import { useSession } from "@/lib/auth-client";

export function MyComponent() {
  const { data: session, isPending } = useSession();
  
  // session may be null (if user is not authenticated)
  // but in protected routes, session should always exist
  
  if (isPending) {
    return <div>Loading...</div>;
  }
  
  if (!session) {
    return <div>Please sign in</div>;
  }
  
  return (
    <div>
      <p>User name: {session.user.name}</p>
      <p>User email: {session.user.email}</p>
    </div>
  );
}

The session object contains the following information:

user - Information about the authenticated user
session - Session data

Waiting for Session to Load

In some cases, you may need to wait for the session to load before accessing user and session information. You can use the isPending property:

import { useSession } from "@/lib/auth-client";

export function MyComponent() {
  const { data: session, isPending } = useSession();
  
  if (isPending) {
    return <div>Loading...</div>;
  }
  
  // At this point, session has finished loading
  if (!session) {
    return <div>Please sign in</div>;
  }
  
  return <div>Welcome, {session.user.name}!</div>;
}

Server-Side Session Access

In server components (RSC), use the getSession function:

import { getSession } from "@/lib/actions/auth";
import { redirect } from "next/navigation";

export default async function ServerComponent() {
  const session = await getSession();
  
  if (!session) {
    redirect("/signin");
  }
  
  return (
    <div>
      <p>User name: {session.user.name}</p>
      <p>User email: {session.user.email}</p>
    </div>
  );
}

Session Data Structure

User Type

type User = {
  id: string;
  createdAt: Date;
  updatedAt: Date;
  email: string;
  emailVerified: boolean;
  name: string | null;
  image: string | null;
}

Session Type

type Session = {
  id: string;
  userId: string;
  createdAt: Date;
  updatedAt: Date;
  expiresAt: Date;
  token: string;
  ipAddress?: string | null;
  userAgent?: string | null;
}

Checking if User is Signed In

Client-Side

import { useSession } from "@/lib/auth-client";

export function MyComponent() {
  const { data: session } = useSession();
  
  if (!session) {
    return <div>Please sign in</div>;
  }
  
  return <div>Signed in user: {session.user.email}</div>;
}

Server-Side

import { getSession } from "@/lib/actions/auth";
import { redirect } from "next/navigation";

export default async function MyPage() {
  const session = await getSession();
  
  if (!session) {
    redirect("/signin");
  }
  
  return <div>Signed in user: {session.user.email}</div>;
}

Accessing Users and Sessions

Client Components

Waiting for Session to Load

Server-Side Session Access

Session Data Structure

User Type

Session Type

Checking if User is Signed In

Client-Side

Server-Side

On this page

Accessing Users and Sessions

Client Components

Waiting for Session to Load

Server-Side Session Access

Session Data Structure

User Type

Session Type

Checking if User is Signed In

Client-Side

Server-Side

On this page