Social / OAuth sign-in

Provision the backend

Provision the auth:sso preset onto your database — it installs the database modules this flow needs (listed under Backend below).

bash

# auth:sso adds connected_accounts_module + identity_providers_module (see Backend below).
pgpm install

Install the blocks

Requires the one-time host setup — the @constructive registry namespace mapped in your components.json.

bash

npx shadcn@latest add @constructive/auth-social-buttons @constructive/auth-social-providers-grid

Wire them up

Mount the runtime once at the app root so every block resolves its hook.

tsx

import { AuthSocialButtons } from '@/blocks/auth/social-buttons/social-buttons';

// Omit `providers` to load enabled providers from the identity-providers API at runtime.
<AuthSocialButtons mode="sign-in" layout="stacked" />

Usage

A representative usage of this flow.

tsx

import { AuthSocialProvidersGrid } from '@/blocks/auth/social-providers-grid/social-providers-grid';

export function SignInExtras() {
  return <AuthSocialProvidersGrid mode="sign-in" returnTo="/dashboard" />;
}

Built with auth-social-buttons, auth-social-providers-grid.

Backend

Provision the auth:sso preset — it installs these database modules (scoped modules shown as name:scope):

users_module
membership_types_module
permissions_module:app
limits_module:app
levels_module:app
memberships_module:app
sessions_module
user_state_module
user_credentials_module
config_secrets_module
emails_module
rls_module
user_auth_module
connected_accounts_module
identity_providers_module

GraphQL operations this flow makes live: identityProviders, signInIdentity, signUpIdentity