Skip to Content

SDK React (@auris/react)

@auris/react v0.1.0

@auris/react est un wrapper léger autour de @auris/js qui expose un contexte React, des hooks et des composants prêts à l’emploi. Si tu utilises Next.js, utilise plutôt @auris/nextjs qui ré-exporte tout ce package et y ajoute les helpers côté serveur.

Installation

npm install @auris/react
pnpm add @auris/react
yarn add @auris/react

AurisProvider

Wrappe la racine de ton application avec AurisProvider. Tous les hooks et composants Auris doivent être des descendants de ce provider.

Props

PropTypeObligatoireDéfautDescription
domainstringOui—Le domaine du tenant Auris
clientIdstringOui—Client ID de l’application
redirectUristringOui—URL de callback, doit être enregistré dans la Console
tenantstringNon'default'Identifiant tenant
storagestring | TokenStoreNon'localStorage'Stockage des tokens
autoRefreshbooleanNontrueRafraîchit les tokens automatiquement
scopestringNon'openid profile email'Scopes OAuth2
onRedirectCallback(appState?: AppState) => voidNon—Appelé après handleRedirectCallback()
// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { AurisProvider } from '@auris/react'
import App from './App'
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <AurisProvider
    domain={import.meta.env.VITE_AURIS_DOMAIN}
    clientId={import.meta.env.VITE_AURIS_CLIENT_ID}
    redirectUri={`${window.location.origin}/callback`}
    onRedirectCallback={(appState) => {
      window.location.replace(appState?.returnTo ?? '/dashboard')
    }}
  >
    <App />
  </AurisProvider>
)

Hooks

useAuris()

Hook principal donnant accès au contexte d’authentification complet. Lève une erreur s’il est utilisé hors d’un AurisProvider.

Retourne : AurisContextValue

interface AurisContextValue {
  // État
  user: UserInfo | null
  isLoading: boolean
  isAuthenticated: boolean
  error: AurisError | null
 
  // Méthodes (mêmes signatures que dans @auris/js)
  loginWithRedirect: (options?: LoginWithRedirectOptions) => Promise<void>
  login: (email: string, password: string) => Promise<AuthResult>
  signup: (email: string, password: string, options?: SignupOptions) => Promise<AuthResult>
  logout: (options?: LogoutOptions) => Promise<void>
  getAccessToken: () => Promise<string | null>
  loginWithMagicLink: (email: string) => Promise<void>
  loginWithSocial: (provider: SocialProvider) => Promise<void>
}
import { useAuris } from '@auris/react'
 
function NavBar() {
  const { user, isLoading, isAuthenticated, logout } = useAuris()
 
  if (isLoading) return <Spinner />
 
  return (
    <nav>
      {isAuthenticated ? (
        <>
          <span>Bienvenue, {user?.firstName}</span>
          <button onClick={() => logout({ returnTo: window.location.origin })}>
            Déconnexion
          </button>
        </>
      ) : (
        <a href="/login">Connexion</a>
      )}
    </nav>
  )
}

useUser()

Hook allégé qui retourne uniquement les informations utilisateur.

Retourne : { user: UserInfo | null; isLoading: boolean; error: AurisError | null }

import { useUser } from '@auris/react'
 
function UserAvatar() {
  const { user, isLoading } = useUser()
 
  if (isLoading) return <SkeletonAvatar />
  if (!user) return null
 
  return <img src={user.picture ?? '/default-avatar.png'} alt={user.name} />
}

useAccessToken()

Retourne le token d’accès courant. Rafraîchit automatiquement si autoRefresh est activé et que le token est expiré.

Retourne : { token: string | null; isLoading: boolean }

import { useAccessToken } from '@auris/react'
 
function ApiClient() {
  const { token } = useAccessToken()
 
  const fetchData = async () => {
    const res = await fetch('/api/data', {
      headers: { Authorization: `Bearer ${token}` },
    })
    return res.json()
  }
 
  // ...
}

usePermissions(permissions)

Vérifie un tableau de permissions pour l’utilisateur courant.

Paramètres : permissions: string[]

Retourne :

{
  has: (permission: string) => boolean
  hasAll: boolean   // true si l'utilisateur a tous les permissions demandés
  hasAny: boolean   // true si l'utilisateur a au moins un des permissions
  isLoading: boolean
  error: AurisError | null
}
import { usePermissions } from '@auris/react'
 
function DocumentActions({ docId }: { docId: string }) {
  const { has, isLoading } = usePermissions(['edit:documents', 'delete:documents'])
 
  if (isLoading) return null
 
  return (
    <div>
      {has('edit:documents') && <button>Modifier</button>}
      {has('delete:documents') && <button>Supprimer</button>}
    </div>
  )
}

useCheckPermission(permission)

Vérifie un seul permission.

Paramètres : permission: string

Retourne : { allowed: boolean; isLoading: boolean; error: AurisError | null }

import { useCheckPermission } from '@auris/react'
 
function AdminSection() {
  const { allowed, isLoading } = useCheckPermission('manage:users')
 
  if (isLoading) return <Spinner />
  if (!allowed) return null
 
  return <AdminPanel />
}

useOrganization()

Retourne l’organisation courante de l’utilisateur et ses membres.

Retourne :

{
  organization: Organization | null
  members: OrganizationMember[]
  isLoading: boolean
  error: AurisError | null
}
 
interface Organization {
  id: string
  name: string
  slug: string
  logoUrl?: string
  metadata: Record<string, unknown>
}
 
interface OrganizationMember {
  userId: string
  email: string
  name: string
  role: string
  joinedAt: string
}
import { useOrganization } from '@auris/react'
 
function OrgHeader() {
  const { organization, isLoading } = useOrganization()
 
  if (isLoading) return null
 
  return (
    <div>
      {organization?.logoUrl && <img src={organization.logoUrl} alt={organization.name} />}
      <h1>{organization?.name}</h1>
    </div>
  )
}

useFga()

Hook pour les vérifications d’autorisation fine-grained. Nécessite que la fonctionnalité FGA soit activée sur le tenant.

Retourne : { check, listObjects, isLoading }

import { useFga } from '@auris/react'
 
function DocumentViewer({ docId }: { docId: string }) {
  const { user } = useUser()
  const { check } = useFga()
  const [canEdit, setCanEdit] = React.useState(false)
 
  React.useEffect(() => {
    if (!user) return
    check({
      objectType: 'document',
      objectId: docId,
      relation: 'editor',
      subjectType: 'user',
      subjectId: user.id,
    }).then((result) => setCanEdit(result.allowed))
  }, [user, docId])
 
  return <div>{canEdit ? <EditToolbar /> : <ReadOnlyView />}</div>
}

Composants

AuthGuard

Protège les parties de l’UI qui nécessitent une authentification. Redirige vers la page de connexion (ou rend un fallback) si l’utilisateur n’est pas authentifié.

Props :

PropTypeObligatoireDéfautDescription
loginUrlstringNon'/login'URL vers laquelle rediriger si non authentifié
fallbackReactNodeNon—Rendu à la place de la redirection si l’utilisateur n’est pas authentifié
childrenReactNodeOui—Contenu à afficher si authentifié
import { AuthGuard } from '@auris/react'
 
function DashboardPage() {
  return (
    <AuthGuard loginUrl="/login">
      <Dashboard />
    </AuthGuard>
  )
}
 
// Avec un fallback au lieu d'une redirection
function ProfileSection() {
  return (
    <AuthGuard fallback={<p>Connecte-toi pour voir ton profil</p>}>
      <UserProfile />
    </AuthGuard>
  )
}

PermissionGate

Rend les enfants uniquement si l’utilisateur courant a le permission spécifié. Rend le fallback ou rien sinon.

Props :

PropTypeObligatoireDéfautDescription
permissionstringOui—Permission requis pour rendre les enfants
fallbackReactNodeNonnullRendu si l’utilisateur n’a pas le permission
childrenReactNodeOui—Contenu à afficher si autorisé
import { PermissionGate } from '@auris/react'
 
function ActionBar() {
  return (
    <div>
      <PermissionGate permission="manage:users" fallback={<p>Accès refusé</p>}>
        <UserManagementPanel />
      </PermissionGate>
 
      <PermissionGate permission="view:reports">
        <ReportsLink />
      </PermissionGate>
    </div>
  )
}

LoginButton

Bouton pré-câblé qui appelle loginWithRedirect() lors du clic.

Props : label?: string + toutes les props HTML <button> standard.

import { LoginButton } from '@auris/react'
 
function HeroSection() {
  return (
    <div>
      <h1>Bienvenue sur MonApp</h1>
      <LoginButton label="Commencer" className="btn-primary" />
    </div>
  )
}

LogoutButton

Bouton pré-câblé qui appelle logout() lors du clic.

Props :

PropTypeDescription
returnTostringURL vers laquelle rediriger après la déconnexion
labelstringTexte du bouton (défaut : “Déconnexion”)
import { LogoutButton } from '@auris/react'
 
function UserMenu() {
  return (
    <LogoutButton returnTo={window.location.origin} label="Se déconnecter" />
  )
}

Exemple Complet (SPA)

Exemple complet d’une Single Page Application avec React Router.

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { AurisProvider } from '@auris/react'
import App from './App'
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <AurisProvider
      domain={import.meta.env.VITE_AURIS_DOMAIN}
      clientId={import.meta.env.VITE_AURIS_CLIENT_ID}
      redirectUri={`${window.location.origin}/callback`}
      onRedirectCallback={(appState) => {
        window.location.replace(appState?.returnTo ?? '/dashboard')
      }}
    >
      <App />
    </AurisProvider>
  </BrowserRouter>
)
// src/pages/CallbackPage.tsx
import { useEffect } from 'react'
import { useAuris } from '@auris/react'
 
export default function CallbackPage() {
  const { loginWithRedirect } = useAuris()
 
  useEffect(() => {
    // handleRedirectCallback est appelé automatiquement par AurisProvider
    // sur les pages de callback. Redirige uniquement l'utilisateur ici.
    window.location.replace('/dashboard')
  }, [])
 
  return <div>Finalisation de la connexion...</div>
}
// src/pages/DashboardPage.tsx
import { AuthGuard, useUser, PermissionGate } from '@auris/react'
 
function DashboardContent() {
  const { user } = useUser()
 
  return (
    <div>
      <h1>Bonjour, {user?.firstName} !</h1>
 
      <PermissionGate permission="view:analytics">
        <AnalyticsDashboard />
      </PermissionGate>
 
      <PermissionGate permission="manage:users">
        <UserManagement />
      </PermissionGate>
    </div>
  )
}
 
export default function DashboardPage() {
  return (
    <AuthGuard loginUrl="/login">
      <DashboardContent />
    </AuthGuard>
  )
}
// src/pages/LoginPage.tsx
import { useAuris } from '@auris/react'
 
export default function LoginPage() {
  const { loginWithRedirect } = useAuris()
 
  return (
    <div className="login-page">
      <h1>Connexion</h1>
      <button onClick={() => loginWithRedirect()}>
        Continuer avec Auris
      </button>
    </div>
  )
}

Corrélés

Architecture