React Native
Learn how to use the Authsignal React Native SDK.
The Authsignal React Native SDK can be used to:
- Sign up and sign in users using passkeys
- Enroll devices for push auth and allow users to approve or reject push auth challenges
Prerequisites
Passkeys
On iOS, passkeys are supported only on iOS 15 and above and synced via iCloud Keychain. Autofill requires iOS 16 and above.
To use passkeys you must first setup an associated domain with the webcredentials
service type.
Host an apple-app-site-association
file on the domain that matches your relying party:
GET https://<yourrelyingparty>/.well-known/apple-app-site-association
The response JSON should look something like this:
{
"applinks": {},
"webcredentials": {
"apps": ["ABCDE12345.com.example.app"]
},
"appclips": {}
}
where ABCDE12345
is your team id and com.example.app
is your bundle identifier.
In XCode under “Signing & Capabilities” add a webcredentials
entry for your domain / relying party e.g. example.com
:
Installation
Install the Authsignal React Native SDK using npm or yarn:
npm install react-native-authsignal
Then link the native iOS dependencies:
npx pod-install ios
Initialization
Initialize the Authsignal client in your code:
import { Authsignal } from "react-native-authsignal";
const authsignal = new Authsignal({ tenantID: "YOUR_TENANT_ID", baseURL: "YOUR_REGION_BASE_URL" });
You can find your tenantId
in the Authsignal Portal.
You must specify the correct baseUrl
for your tenant’s region.
Region | Base URL |
---|---|
US (Oregon) | https://api.authsignal.com/v1 |
AU (Sydney) | https://au.api.authsignal.com/v1 |
EU (Dublin) | https://eu.api.authsignal.com/v1 |
Passkeys
For more information visit our passkeys documentation.
Registering a new passkey
const { data: resultToken, error } = await authsignal.passkey.signUp({ token, userName });
Authenticating with an existing passkey
const { data: resultToken, error } = await authsignal.passkey.signIn();
Using passkey autofill (iOS)
This feature requires rendering a text input with the attribute textContentType={"username"}
:
<TextInput placeholder="Email address" value="email" onChangeText={setEmail} textContentType={"username"} />
Then when the page loads, you should initialize the input for passkey autofill by running the following code:
authsignal.passkey.signIn({ autofill: true }).then(({ data: resultToken, error }) => {
if (resultToken) {
// The user has focused your text input and authenticated with an existing passkey
// Send the token to your server to validate the result of the challenge
}
});
Cancelling a pending autofill request (iOS)
authsignal.passkey.cancel();
Push
Adding a device credential
Adding a new credential must be authorized with a short-lived token. You can obtain this by calling the track
endpoint on the Server API which will return a token
in the response. This should be done at a point in your application when the user is strongly authenticated.
await authsignal.push.addCredential(token);
Removing a device credential
await authsignal.push.removeCredential();
Getting a challenge
const challengeId = await authsignal.push.getChallenge();
Updating a challenge
const approved = true; // true if the user has approved the challenge
await authsignal.push.updateChallenge(challengeId, approved);