Guide de démarrage rapide

Mettez votre application en route avec l'authentification AuthSafe en moins de 10 min. Ce guide presente les etapes essentielles pour integrer une authentification securisee dans votre 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 ->