- Overview
- 🚀 Getting Started
- 📌 Usage
- 💡 Example Application
- 📄 Documentation & Support
- 🚢 Release Notes
- 🔒 License
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.
- React v18+
- Node.js
>=18.17.0
or later
npm install @corbado/react
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;
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;
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;
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;
Remember to check loading
state of the hook before using authentication states.
Implement logout functionality easily with the logout
method from the useCorbado
hook:
import { useCorbado } from '@corbado/react';
const LogoutButton = () => {
const { logout } = useCorbado();
const handleLogout = async () => {
await logout();
// Redirect or perform additional actions after logout
};
// UI logic and styling for logout button
};
export default LogoutButton;
- For a detailed example using the
@corbado/react
package checkout the example application and its source code
For support and questions please visit our Slack channel. For more detailed information and advanced configuration options, please visit our Documentation Page.
Find out what we've shipped! Check out the changelog files here
This project is licensed under the MIT License - see the LICENSE file for details.