Skip to content

Framework Integrations

gau is designed to be framework-agnostic. It can run anywhere, but official support makes it easier.

It provides client-side components and hooks for frameworks. This section covers the common features and options available across all client integrations.

gau has support for full-stack frameworks:

And backend-only frameworks:

For backend-only setups, you can use the vanilla client on the frontend:

To get started, you need to wrap your application’s root component with the AuthProvider. This component manages the authentication state and makes it available throughout your app.

You can configure the AuthProvider with the following props:

Type: string Default: '/api/auth'

The base URL for the authentication API endpoints. This should match the basePath configured in your createAuth setup on the server.

Type: string Default: 'gau'

The URL scheme used for deep linking in desktop applications (e.g., Tauri). This is used to redirect the user back to your app after they have authenticated with an OAuth provider.

Type: string Default: The current host URL

A default URL to redirect to after a successful sign-in. This can be overridden by passing a redirectTo option to the signIn function.

The useAuth hook is the primary way to access authentication state and methods in your components.

The useAuth hook returns an object with the following properties:

Type: GauSession

An object containing the current authentication state. Its user and session properties will be null if the user is not authenticated.

  • user: The user object from the database, or null.
  • session: The session object containing the raw JWT payload, or null.
  • accounts: An array of OAuth accounts linked to the user, or null.
  • providers: An array of available provider IDs.

Type: boolean

A boolean indicating whether the initial session fetch is still in progress. This is useful for showing loading states in your UI.

Type: (provider: string, options?: { redirectTo?: string }) => Promise<void>

A function to initiate the sign-in process with a specific OAuth provider.

  • provider: The ID of the provider to use (e.g., 'github', 'google').
  • options.redirectTo: A URL to redirect to after a successful sign-in, overriding the default redirectTo prop on the AuthProvider.

Type: () => Promise<void>

A function to sign the user out, clearing their session.

Type: (provider: string, options?: { redirectTo?: string }) => Promise<void>

A function to initiate the OAuth flow to manually link an additional provider to the currently authenticated user’s account.

  • provider: The ID of the provider to link (e.g., 'github', 'google').
  • options.redirectTo: A URL to redirect to after a successful link, overriding the default redirectTo prop on the AuthProvider.

Type: (provider: string) => Promise<void>

A function to unlink an OAuth provider from the user’s account.

  • provider: The ID of the provider to unlink.

Type: () => Promise<void>

A function to manually refresh the session from the server. This fetches the latest session data and updates the local state.

This might be useful when:

  • You’ve updated user data on the server and want to reflect changes immediately
  • You want to check if the session is still valid
  • You’ve linked or unlinked accounts and want to update the accounts list