NoAuthLogin (React)

High-level component to handle noauth authentication flow in React applications.

Installation

npm i @noauth/react

Basic usage

import { NoAuthLogin, type AuthResponse } from "@noauth/react";

function App() {
  const handleSuccess = (authResponse: AuthResponse) => {
    console.log("Authenticated:", authResponse);
  };

  return <NoAuthLogin apiKey="YOUR_API_KEY" onSuccess={handleSuccess} />;
}

apiKey is required. You can get it in your dashboard.

The component calls onSuccess when the user is successfully verified.

Props

Prop	Type	Required	Default	Description
`apiKey`	string	Yes	—	Your NoAuth API Key.
`email`	string	No	—	Prefills the email in the form.
`forceAuthQr`	boolean	No	false	Forces the QR authentication flow when available.
`forceEmailVerification`	boolean	No	false	Forces the email verification flow through OTP.
`rememberEmail`	boolean	No	true	Remembers the email across sessions using `localStorage`.
`onSuccess`	function	Yes	—	Callback function executed when authentication is successful.

Combining props example:

<NoAuthLogin
  apiKey="YOUR_API_KEY"
  email="[email protected]"
  forceEmailVerification={true}
  onSuccess={handleSuccess}
/>

onSuccess Callback

onSuccess(payload: AuthResponse)

Executed when authentication completes successfully.

AuthResponse type:

type AuthResponse = {
  verified: boolean;
  accessToken: string | null;
  email: string;
  emailVerified: boolean;
};

Styling

You can customize styles using CSS classes. For example:

form.noauth-login {
  /* Using Tailwind CSS variables */
  border: 1px solid var(--color-zinc-800);

  & input {
    background-color: var(--color-zinc-900);
  }
}

You can also use CSS-in-JS or styled-components to customize the component:

import styled from "styled-components";

const StyledNoAuthLogin = styled(NoAuthLogin)`
  form.noauth-login {
    border: 1px solid #374151;

    input {
      background-color: #111827;
    }
  }
`;