Quick Start Guide

Get your application up and running with AuthSafe authentication in under 10 min. This guide walks you through the essential steps to integrate secure authentication into your app.

5-10 minutes

React SDK

OAuth 2.0

Before You Begin

Prerequisites

Node.js 16 or newer
A React application
An AuthSafe account
A registered app with client credentials

What You Will Build

Login and logout flow
OAuth callback handling
Authenticated user session
A protected app experience

Step 1: Register Your Application

Create an application in the AuthSafe dashboard and copy your Client ID and redirect URI.

Keep Your Client ID Safe

Client IDs are safe for frontend usage, but never expose client secrets in browser code.

Step 2: Install the SDK

npm install authsafe-react
# or
yarn add authsafe-react
# or
pnpm add authsafe-react

Step 3: Configure AuthProvider

Wrap your app with AuthProvider to initialize AuthSafe and make authentication state available.

import { AuthProvider } from 'authsafe-react';

export default function RootLayout({ children }) {
  return (
    <AuthProvider
      config={{
        clientId: 'your-client-id-here',
        redirectUri: 'http://localhost:3000/callback',
        scope: ['openid', 'profile', 'email'],
        env: 'production',
      }}
    >
      {children}
    </AuthProvider>
  );
}

Step 4: Add an OAuth Callback Route

Create a callback page that processes the redirect and completes user sign-in.

'use client';

import { useOAuthCallback } from 'authsafe-react';

export default function CallbackPage() {
  const { isLoading, error } = useOAuthCallback();

  if (isLoading) return <div>Processing login...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>Login successful! Redirecting...</div>;
}

Complete Example

import { AuthProvider, useLogin, useAuth, useLogout } from 'authsafe-react';

function App() {
  return (
    <AuthProvider
      config={{
        clientId: 'your-client-id',
        redirectUri: 'http://localhost:3000/callback',
        scope: ['openid', 'profile', 'email'],
        env: 'production',
      }}
    >
      <YourApp />
    </AuthProvider>
  );
}

function LoginButton() {
  const { signinRedirect, isLoading } = useLogin();

  return (
    <button onClick={() => signinRedirect()} disabled={isLoading}>
      {isLoading ? 'Logging in...' : 'Login with AuthSafe'}
    </button>
  );
}

function UserProfile() {
  const { user, isAuthenticated } = useAuth();
  const { logout } = useLogout();

  if (!isAuthenticated) {
    return <LoginButton />;
  }

  return (
    <div>
      <h2>Welcome, {user?.name || user?.email}</h2>
      <button onClick={() => logout()}>Logout</button>
    </div>
  );
}

Next Steps

Explore the React SDK

Learn about hooks, provider setup, and components for production usage.

View React SDK Docs ->

Authorization Guide

Understand scopes, access control, and how to protect application resources.

View Authorization Docs ->

API Reference

Explore endpoint behavior, request patterns, and response formats.

View API Docs ->