---
title: Authentication
description: Auth0 screens, reproduced 1-1 in Tailwind. Created by malinskibeniamin.
icon: log-in
author:
  name: malinskibeniamin
  url: https://github.com/malinskibeniamin

mode: wide
---

### Installation

```package-install
npx shadcn@latest add @redpanda/auth0
```

<figure className="flex flex-col gap-4">
  <ComponentPreview
    name="login-demo"
    wide
    title="Login"
    description="A login building block created using Redpanda UI, mapping the CSS from Auth0"
  />
  <figcaption className="text-center text-sm text-subtle">A login that looks like an Auth0 landing screen.</figcaption>
</figure>

## Usage

```tsx
import React from 'react';
import {
  Auth0Button,
  Auth0Divider,
  Auth0Header,
  Auth0Input,
  Auth0Modal,
  Auth0ModalBody,
  Auth0ModalDescription,
  Auth0ModalHeading,
  Auth0ModalLink,
  Auth0ModalText,
  Auth0SubmitButton,
} from '@/registry/components/auth0';
```

```tsx
<Auth0Modal>
  <Auth0Header withLogo={true} />

  <Auth0ModalBody>
    <Auth0ModalHeading>Log in</Auth0ModalHeading>
    <Auth0ModalDescription>Enter your email address to log in to Redpanda Cloud</Auth0ModalDescription>

    {/* Form */}
    <form className="space-y-4 mt-6">
      {/* Email Input */}
      <Auth0Input type="email" placeholder="Enter your email address" defaultValue="email@redpanda.com" />

      {/* Continue Button */}
      <Auth0SubmitButton>Continue</Auth0SubmitButton>
    </form>

    {/* Divider */}
    <Auth0Divider text="OR" />

    {/* OAuth Buttons */}
    <div className="space-y-3 mt-6">
      <Auth0Button provider="google">Continue with Google</Auth0Button>

      <Auth0Button provider="github">Continue with GitHub</Auth0Button>
    </div>

    {/* Sign up Link */}
    <Auth0ModalText className="text-center mt-6">
      Don't have an account? <Auth0ModalLink href="#">Sign up</Auth0ModalLink>
    </Auth0ModalText>
  </Auth0ModalBody>
</Auth0Modal>
```

### Providers

`Auth0Button`'s `provider` both selects the icon and is written to `data-provider`, so pass the Auth0
connection id you actually authenticate with. `google-oauth2` and `oidc` resolve to the Google and
Okta icons alongside the short `google`, `github`, `mail` and `okta` keys; any other id renders the
button with an empty icon slot.

## Examples

### Login

<figure className="flex flex-col gap-4">
  <ComponentPreview
    name="login-demo"
    wide
    title="Login"
    description="A login building block created using Redpanda UI, mapping the CSS from Auth0"
  />
  <figcaption className="text-center text-sm text-subtle">A login that looks like an Auth0 landing screen.</figcaption>
</figure>

### Login (Email)

<figure className="flex flex-col gap-4">
  <ComponentPreview
    name="login-email-demo"
    wide
    title="Login (Email)"
    description="A login building block with email input"
  />
  <figcaption className="text-center text-sm text-subtle">
    A login with an input prompting the user for an email address.
  </figcaption>
</figure>

### Login (Authentication Method)

<figure className="flex flex-col gap-4">
  <ComponentPreview
    name="login-authentication-method-demo"
    wide
    title="Login (Authentication Method)"
    description="A login building block with an ability to choose authentication method"
  />
  <figcaption className="text-center text-sm text-subtle">
    A login with an input prompting the user for an authentication method.
  </figcaption>
</figure>

## Credits

- The original implementation in Chakra UI can be found in the legacy UI component library's Storybook [here](https://redpanda-ui.netlify.app).