Integration Guide
NextJS
Exports
React-Components
Client & Server

React Components

Client and Server Components

These components can be used anywhere in your React code and can be imported directly from '@akarigar/auth'.

import {
  AuthProvider,
  MemberList,
  Presence,
  SignedIn,
  SignedOut,
  SignOutButton,
} from '@akarigar/auth';
  • MemberList
  • Presence
  • SignedIn
  • SignedOut
  • SignIn
  • SignOut
  • SignOutButton

SignOutButton Usage

import { SignOutButton } from '@akarigar/auth';
import { Button } from './your-ui-library';
 
// Basic usage
<SignOutButton>Sign out</SignOutButton>
 
// With custom styling
<SignOutButton className="my-custom-button">Sign out</SignOutButton>
 
// With redirect after sign out
<SignOutButton redirectUrl="/login">Sign out</SignOutButton>
 
// With callback after successful sign out
<SignOutButton
  onSignOut={() => {
    console.log('User signed out');
    // Close modals, clear local state, etc.
  }}
>
  Sign out
</SignOutButton>
 
// Use your own button component with asChild
<SignOutButton asChild>
  <Button variant="outline" color="danger">
    Sign out
  </Button>
</SignOutButton>

Utility Server Components

auth² provides utility server components: Presence, SignedIn, and SignedOut.

  • Presence: Renders a user menu with sign out option if logged in.
  • SignedIn: Displays its children if a user is signed in.
  • SignedOut: Displays its children if a user is signed out.

To get the current user object, use fetchCurrentUser.

Example usage of Presence, SignedIn, and SignedOutand fetchCurrentUser

import { Presence, SignedIn, SignedOut } from '@akarigar/auth';
import { fetchCurrentUser } from '@akarigar/auth/server';
 
export default async function Page() {
  const user = await fetchCurrentUser();
 
  return (
    <>
      <header>
        <Presence />
      </header>
      <SignedIn>
        <h1>Welcome, {user?.firstName ?? user?.emailAddress}!</h1>
        <span>Your user id is <b>{user?.id}</b>.</span>
      </SignedIn>
      <SignedOut>
        <a href="/sign-in">Please sign in</a>
      </SignedOut>
    </>
  );
}
HooksHeadless