FeaturesAuthentication

Retrieve User

Retrieve the current user in your application.

Once the user is logged in, you will have to get the user data in your application. For this you will have to use the @kit/auth/user endpoint that expose all the tools you need for post-authentication actions.

In this page, the user will be a row of the public.user table, different from the supabase auth.user table.

The goal of the @kit/auth package is to avoid you the pain to deals with the supabase auth.user table.

Server

'server-only';
 
import { getDrizzleSupabaseClient } from '@kit/db';
import { getSupabaseServerClient } from '@kit/supabase-server';
 
async function () {
    const supabaseClient = getSupabaseServerClient();
    const db = await getDrizzleSupabaseClient(supabaseClient);
 
    const user = await db.user.get();
};

Client

User Provider

The first thing you will have to do is to wrap your application with the UserProvider component.

app/dashboard/layout.tsx


import React from 'react';
import { UserProvider } from '@kit/auth/user';
import { redirect } from 'next/navigation';
import { getDBClient } from '~/lib/get-db-client';
 
export default async function YourPrivateEndpointLayout(
    props: React.PropsWithChildren
): Promise<React.JSX.Element> {
    const db = await getDBClient();
    const user = await db.user.get();
 
    if (!user) {
        return redirect('/auth/sign-in');
    }
    if (!user.completedOnboarding) {
        return redirect('/onboarding');
    }
 
    return <UserProvider user={user}>{props.children}</UserProvider>;
}

Line 12 refers to the onboarding feature.

getDBClient is just a shortcut to get the db object.

User Hook

Use the useUser hook to access the current authenticated user:


'use client';
 
import { useUser } from '@kit/auth/user';
 
export function UserProfile() {
    const user = useUser();
 
    if (!user) {
        return <div>Please sign in</div>;
    }
 
    return (
        <div>
            <h1>Welcome, {user.name}</h1>
            <p>Email: {user.email}</p>
        </div>
    );
}

Sign Out Button

Add a sign out button using the provided component:

'use client';
 
import { SignOutButton } from '@kit/auth/ui/sign-out-button';
import { authConfig } from '~/config/auth.config';
 
export function Header() {
    return (
        <header>
            <nav>
                {/* Other nav items */}
                <SignOutButton redirectTo={authConfig.urls.signIn} />
            </nav>
        </header>
    );
}

SignOutButtonProps

Prop	Type	Default
`redirectTo*`	`string`
`onSignOut`	`function`
`asChild`	`boolean`	`false`

Next Steps

In the next page, you will see how to display the authentication user settings.

Page	Description
Session Management	View and manage active user sessions
MFA Security	Enable two-factor authentication
Account Deletion	Delete a user account

Integration

How to implement the authentication feature in an existing application.

User Settings

Display the authentication user settings UI.

How is this guide?

Last updated on 10/17/2025