Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/authsignal/authsignal-react
React components for Authsignal
https://github.com/authsignal/authsignal-react
2fa authentication mfa next nextjs passkey passkeys react remix typescript webauthn
Last synced: 7 days ago
JSON representation
React components for Authsignal
- Host: GitHub
- URL: https://github.com/authsignal/authsignal-react
- Owner: authsignal
- Created: 2024-10-01T06:32:01.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-10-24T02:36:39.000Z (21 days ago)
- Last Synced: 2024-10-24T19:15:20.668Z (20 days ago)
- Topics: 2fa, authentication, mfa, next, nextjs, passkey, passkeys, react, remix, typescript, webauthn
- Language: TypeScript
- Homepage: https://authsignal.com
- Size: 219 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Authsignal React SDK
React components for [Authsignal](https://authsignal.com).
[Documentation](https://docs.authsignal.com/sdks/client/react)
## Installation
Add `@authsignal/react` to your `package.json` dependencies.
### NPM
```bash
npm install @authsignal/react
```
### Yarn
```bash
yarn add @authsignal/react
```
## Usage
Render the `AuthsignalProvider` component at the root of your app.
```jsx
import { Authsignal } from '@authsignal/react';
function App() {
return (
);
}
```
Import the `useAuthsignal` hook in your component.
Then pass the `challengeOptions` returned from your server to the `startChallenge` function.
```jsx
import { useAuthsignal } from '@authsignal/react';
export function Checkout() {
const { startChallenge } = useAuthsignal();
const handlePayment = async () => {
const response = await fetch('/api/payment', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
const data = await response.json();
if (data.token) {
startChallenge({
token: data.token,
onChallengeSuccess: ({ token }) => {
// Challenge was successful
},
onCancel: () => {
// User cancelled the challenge
},
onTokenExpired: () => {
// Token expired
},
});
}
};
return (
Pay
);
}
```
Alternatively, you can use the `startChallengeAsync` function to work with promises.
```jsx
import { useAuthsignal, ChallengeError } from '@authsignal/react';
export function Checkout() {
const { startChallengeAsync } = useAuthsignal();
const handlePayment = async () => {
const response = await fetch('/api/payment', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
const data = await response.json();
if (data.token) {
try {
const { token } = await startChallengeAsync({
token: data.token,
});
// Challenge was successful
} catch (e) {
if (e instanceof ChallengeError) {
if (e.code === "USER_CANCELED") {
// User cancelled the challenge
} else if (e.code === "TOKEN_EXPIRED") {
// Token expired
}
}
}
}
};
return (
Pay
);
}
```