Authentication

Auth0 screens, reproduced 1-1 in Tailwind. Created by malinskibeniamin.

Installation

bash

npx shadcn@latest add @redpanda/auth0

bash

pnpm dlx shadcn@latest add @redpanda/auth0

bash

yarn dlx shadcn@latest add @redpanda/auth0

bash

bunx shadcn@latest add @redpanda/auth0

bash

nubx shadcn@latest add @redpanda/auth0

bash

aube dlx shadcn@latest add @redpanda/auth0

A login that looks like an Auth0 landing screen.

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>

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

A login that looks like an Auth0 landing screen.

A login with an input prompting the user for an email address.

A login with an input prompting the user for an authentication method.

Credits

The original implementation in Chakra UI can be found in the legacy UI component library’s Storybook here.