https://github.com/fells-code/seamless-auth-react
The Seamless Auth React frontend SDK, allowing quick integration with seamless auth instances
https://github.com/fells-code/seamless-auth-react
passwordless passwordless-authentication passwordless-login seamlessauth
Last synced: about 2 months ago
JSON representation
The Seamless Auth React frontend SDK, allowing quick integration with seamless auth instances
- Host: GitHub
- URL: https://github.com/fells-code/seamless-auth-react
- Owner: fells-code
- License: agpl-3.0
- Created: 2024-08-28T04:45:39.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-04-23T15:53:21.000Z (about 2 months ago)
- Last Synced: 2026-04-23T17:34:01.991Z (about 2 months ago)
- Topics: passwordless, passwordless-authentication, passwordless-login, seamlessauth
- Language: TypeScript
- Homepage: https://seamlessauth.com
- Size: 1010 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# Seamless Auth React
# @seamless-auth/react
[](https://www.npmjs.com/package/@seamless-auth/react)
[](https://github.com/fells-code/seamless-auth-react/actions/workflows/release.yml)
[](https://app.codecov.io/gh/fells-code/seamless-auth-react)
[](./LICENSE)
A drop-in authentication provider for React applications, designed to handle login, multi-factor authentication, passkeys, and user session validation using your own backend.
## Features
- Provides `AuthProvider` context
- Includes `useAuth()` hook for access to auth state and actions
- Ships with pre-built login, MFA, and passkey routes
- Lets consumer apps handle routing via `react-router-dom`
- Supports automatic session validation on load
---
## Installation
```bash
npm install seamless-auth-react
```
---
## Usage
### 1. Wrap your app with `AuthProvider`
```tsx
import { AuthProvider } from 'seamless-auth-react';
import { BrowserRouter } from 'react-router-dom';
;
```
### 2. Use `useAuth()` to access auth state
```tsx
import { useAuth } from 'seamless-auth-react';
const Dashboard = () => {
const { user, logout } = useAuth();
return (
Welcome, {user?.email}
Logout
);
};
```
### 3. Use `` for handling login/mfa/passkey screens
```tsx
import { Routes, Route } from 'react-router-dom';
import { useAuth, AuthRoutes } from 'seamless-auth-react';
const AppRoutes = () => {
const { isAuthenticated } = useAuth();
return (
{isAuthenticated ? (
} />
) : (
} />
)}
);
};
```
> Note: You are responsible for handling route protection and redirects based on `isAuthenticated`.
---
## AuthContext API
### `useAuth()` returns:
```ts
{
user: { email: string, roles?: string[] } | null;
isAuthenticated: boolean;
logout(): Promise;
deleteUser(): Promise;
hasRole(role: string): boolean | undefined;
}
```
---
## Auth Routes Included
- `/login`
- `/mfaLogin`
- `/passKeyLogin`
- `/registerPasskey`
- `/verifyOTP`
Each route includes a pre-built UI and expects your backend to expose compatible endpoints.
---
## Customization
You can override the included UI screens by:
- Copying the component source from the package
- Creating your own version
- Replacing the component in your app
---
## Notes
- This package **does not** create its own `` or ``.
- It is designed to be fully compatible with your existing routing tree.
- The `AuthProvider` automatically calls `/users/me` on load to validate session.
---
## License
MIT