Login - Auth0 Docs

The Login screen handles the primary authentication flow, allowing users to sign in with username/password credentials or via a federated identity provider. This screen is presented when a user attempts to log in to an application.

Import Example

import React, { useState } from "react";
import {
  useLogin,
  useUser,
  useTenant,
  useBranding,
  useClient,
  useOrganization,
  usePrompt,
  useUntrustedData,
} from "@auth0/auth0-acul-react/login";

function LoginForm() {
  const { login, federatedLogin } = useLogin();
  return (
    <button onClick={() => login({ username: "user@example.com", password: "secret" })}>
      Sign In
    </button>
  );
}

Context Hooks

useBranding

() => BrandingMembers

Provides branding configurations, such as logo, colors, and theme settings displayed on the login screen.

Example

import { useBranding } from '@auth0/auth0-acul-react/login';
function CustomTheme() {
  const branding = useBranding();
}

useClient

() => ClientMembers

Provides client-related configurations, such as id, name, and logoUrl, for the login screen.

Example

import { useClient } from '@auth0/auth0-acul-react/login';
function AppInfo() {
  const client = useClient();
}

useOrganization

() => OrganizationMembers

Provides information about the user’s organization if the login is organization-scoped. Returns null when no organization context is present.

Example

import { useOrganization } from '@auth0/auth0-acul-react/login';
function OrgSelector() {
  const organization = useOrganization();
  if (!organization) {
    return <p>No organization context</p>;
  }
}

usePrompt

() => PromptMembers

Contains data about the current prompt in the authentication flow.

Example

import { usePrompt } from '@auth0/auth0-acul-react/login';
function FlowInfo() {
  const prompt = usePrompt();
}

useScreen

() => ScreenMembersOnLogin

Contains details specific to the login screen, including its configuration and context.

Example

import { useScreen } from '@auth0/auth0-acul-react/login';
function ScreenDebug() {
  const screen = useScreen();
}

useTenant

() => TenantMembers

Contains data related to the tenant, such as id and associated metadata.

Example

import { useTenant } from '@auth0/auth0-acul-react/login';
function TenantInfo() {
  const tenant = useTenant();
}

useTransaction

() => TransactionMembersOnLogin

Provides transaction-specific data for the login screen, such as active connections, available login methods, and current flow state.

Example

import { useTransaction } from '@auth0/auth0-acul-react/login';
function TransactionInfo() {
  const transaction = useTransaction();
}

useUntrustedData

() => UntrustedDataMembers

Handles untrusted data passed to the screen, such as a prefilled username from URL parameters.

Example

import { useUntrustedData } from '@auth0/auth0-acul-react/login';
function PrefilledForm() {
  const untrustedData = useUntrustedData();
}

useUser

() => UserMembers

Details of the active user, including username, email, and available authentication methods.

Example

import { useUser } from '@auth0/auth0-acul-react/login';
function UserProfile() {
  const user = useUser();
}

Methods

Initiates authentication via a federated identity provider such as Google or GitHub.

Example

import { useLogin } from '@auth0/auth0-acul-react/login';

function SocialButton() {
  const { federatedLogin } = useLogin();
  return (
    <button onClick={() => federatedLogin({ connection: 'google-oauth2' })}>
      Sign in with Google
    </button>
  );
}

Show Parameters

payload

FederatedLoginPayloadOptions

Properties

connection

string

The social connection name to use (e.g. google-oauth2, github).

Submits the user’s credentials to complete authentication on the login screen.

Example

import { useLogin } from '@auth0/auth0-acul-react/login';

function LoginForm() {
  const { login } = useLogin();
  return (
    <button onClick={() => login({ username: 'user@example.com', password: 'secret' })}>
      Sign In
    </button>
  );
}