@corbado/react

@corbado/react

---

Table of Contents

• Overview
• 🚀 Getting Started
  • Prerequisites
  • Installation
  • Setting up the package
• 📌 Usage
  • CorbadoAuth component
  • PasskeyList component
  • Accessing Authentication State
  • Logging Out
• 💡 Example Application
• 📄 Documentation & Support
• 🔒 License

---

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 signUp 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

Utilize the useCorbado hook to access authentication states like user and shortSession. Use user to show information about the currently logged in user (e.g. name and email). If the user is not logged in this value is undefined. Use shortSession as a token to authenticate against your backend API (if you have one).

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

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

  if (loading) {
    // Render loading state
  }

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

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-sdk';

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.

---

🔒 License

This project is licensed under the MIT License - see the LICENSE file for details.