@corbado/react NPM

@corbado/react

Overview

The @corbado/react package provides a comprehensive solution for integrating passkey-based authentication in React applications. It simplifies the process of managing authentication states and user sessions with easy-to-use hooks and UI components.

🚀 Getting Started

Prerequisites

React v18+
Node.js >=18.17.0 or later

Installation

npm install @corbado/react

Setting up the package

Add CorbadoProvider to your main App component to wrap your application:

import { CorbadoProvider } from '@corbado/react';

function App() {
  return (
    <CorbadoProvider projectId='pro-XXXXXXXXXXXXXXXXXXXX'>
      {/* Your routes and other components go here */}
    </CorbadoProvider>
  );
}

export default App;

📌 Usage

CorbadoAuth component

Adding SignUp/Login screens is simple with @corbado/react. The CorbadoAuth component allows your users to sign up and login with their passkeys. Additionally, it provides fallback options like email one-time passcode for users who don't have a passkey yet.

import { CorbadoAuth } from '@corbado/react';

const AuthPage = () => {
  const onLoggedIn = () => {
    // Navigate or perform actions after successful login
  };

  return <CorbadoAuth onLoggedIn={onLoggedIn} />;
};

export default AuthPage;

PasskeyList component

Users that are logged in want to see a list of all their existing passkeys and they want to manage them. You can make this possible by using the PasskeyList component. It shows all passkeys of the currently logged in user and allows them to add and remove passkeys.

import { PasskeyList } from '@corbado/react';

const PasskeysView = () => {
  // Additional logic or styling

  return (
    <div>
      <PasskeyList />
    </div>
  );
};

export default PasskeysView;

Accessing Authentication State

If you want to know if the user is currently authenticated or not make use of the useCorbado hook. Use isAuthenticated and loading to check the authentication state.

import { useCorbado } from '@corbado/react';

const HomePage = () => {
  const { loading, isAuthenticated } = useCorbado();

  if (loading) {
    // Render loading state
  }

  if (isAuthenticated) {
    // Render authenticated state
  }

  // Additional implementation
};

export default HomePage;

If you need more information about the user (e.g. name, email, etc.) use the useCorbadoSession hook. It also gives you access to the user's shortSession which you can use to make authenticated requests to your backend.

import { useCorbadoSession } from '@corbado/react';

const HomePage = () => {
  const { loading, user } = useCorbadoSession();

  if (loading) {
    // Render loading state
  }

  if (user) {
    // Render authenticated state
  }
};

export default HomePage;

Remember to check loading state of the hook before using authentication states.

Logging Out

Implement logout functionality easily with the logout method from the useCorbado hook:

import { useCorbado } from '@corbado/react';

const LogoutButton = () => {
  const { logout } = useCorbado();

  const handleLogout = () => {
    logout();
    // Redirect or perform additional actions after logout
  };

  // UI logic and styling for logout button
};

export default LogoutButton;

💡 Example Application

For a detailed example using the @corbado/react package checkout the example application and its source code

📄 Documentation & Support

For support and questions please visit our Slack channel. For more detailed information and advanced configuration options, please visit our Documentation Page.