React Hooks

The @bastionauth/react package provides hooks for interacting with BastionAuth.

`useAuth`

The primary hook for accessing authentication state.

import { useAuth } from '@bastionauth/react';
 
function MyComponent() {
  const { isLoaded, isSignedIn, userId, getToken } = useAuth();
 
  if (!isLoaded) return <div>Loading...</div>;
 
  if (isSignedIn) {
    return <div>Hello, {userId}!</div>;
  }
 
  return <div>Not signed in</div>;
}

`useUser`

Access the current user's profile data.

import { useUser } from '@bastionauth/react';
 
function Profile() {
  const { user, isLoaded, isSignedIn } = useUser();
 
  if (!isLoaded || !isSignedIn) return null;
 
  return (
    <div>
      <h1>{user.firstName} {user.lastName}</h1>
      <p>{user.email}</p>
    </div>
  );
}

`useOrganization`

Access the active organization and membership details.

import { useOrganization } from '@bastionauth/react';
 
function OrgDetails() {
  const { organization, membership } = useOrganization();
 
  if (!organization) return <div>No active organization</div>;
 
  return <div>{organization.name} - {membership.role}</div>;
}

`useSession`

Access session information.

import { useSession } from '@bastionauth/react';

Next.js SDK Components