Guía de inicio rápido

Pon tu aplicacion en marcha con la autenticacion de AuthSafe en menos de 10 min. Esta guia te lleva por los pasos esenciales para integrar autenticacion segura en tu app.

5-10 minutos

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 ->