Authenticating Users via OTP

This guide assumes you have already followed the Setup Guide and have set up the Alchemy Account Provider using this guide. Please refer to the guides above for more information on how to properly setup your project.

For a complete example of how we can setup a project and use the various available authentication methods, please refer to our quickstart example.

Authenticating a user is easy using the useAuthenticate() hook from the @account-kit/react-native package.

Set the Email Mode to One Time Password (OTP) in your Account Kit Dashboard

This is the default mode for email authentication. Only follow these steps if you had previously set the email mode to Magic Link.

In your Alchemy Accounts Dashboard:

  • Navigate to the Smart Wallets tab

  • Select the config you would be using for your project and click the Edit button

  • Scroll down to the Email Mode options in the Email section and select One Time Password (OTP)

    Email Mode OTP
  • Click the Save Changes button

Send a One-Time Password (OTP) to a User

To send an OTP to a user’s email, use the authenticate() function from the useAuthenticate() hook with the type set to email and the emailMode set to otp.

import { 
function useAuthenticate(mutationArgs?: UseAuthenticateMutationArgs): UseAuthenticateResult

Hook that provides functions and state for authenticating a user using a signer. It includes methods for both synchronous and asynchronous mutations. Useful if building your own UI components and want to control the authentication flow. For authenticate vs authenticateAsync, use authenticate when you want the hook the handle state changes for you, authenticateAsync when you need to wait for the result to finish processing.

This can be complex for magic link or OTP flows: OPT calls authenticate twice, but this should be handled by the signer.

useAuthenticate
} from "@account-kit/react-native";
import React, {
function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)

Returns a stateful value, and a function to update it.

useState
} from "react";
import {
type Alert = AlertStatic const Alert: AlertStatic
Alert
,
class View
View
,
class Text
Text
,
class TextInput
TextInput
,
class Button
Button
,
const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<View>>
Pressable
} from "react-native";
function
function SignInWithOtp(): JSX.Element
SignInWithOtp
() {
const {
const authenticate: UseMutateFunction<User, Error, AuthParams, unknown>
authenticate
} =
function useAuthenticate(mutationArgs?: UseAuthenticateMutationArgs): UseAuthenticateResult

Hook that provides functions and state for authenticating a user using a signer. It includes methods for both synchronous and asynchronous mutations. Useful if building your own UI components and want to control the authentication flow. For authenticate vs authenticateAsync, use authenticate when you want the hook the handle state changes for you, authenticateAsync when you need to wait for the result to finish processing.

This can be complex for magic link or OTP flows: OPT calls authenticate twice, but this should be handled by the signer.

useAuthenticate
();
const [
const email: string
email
,
const setEmail: React.Dispatch<React.SetStateAction<string>>
setEmail
] =
useState<string>(initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] (+1 overload)

Returns a stateful value, and a function to update it.

useState
("");
const
const handleUserSignInWithOtp: () => void
handleUserSignInWithOtp
= () => {
try {
const authenticate: (variables: AuthParams, options?: MutateOptions<User, Error, AuthParams, unknown> | undefined) => void
authenticate
({
email: string
email
,
type: "email"
type
: "email",
}); // OTP sent to the user's email. Prompt the user to enter the OTP into your app. } catch (
function (local var) e: unknown
e
) {
const Alert: AlertStatic
Alert
.
AlertStatic.alert: (title: string, message?: string, buttons?: AlertButton[], options?: AlertOptions) => void
alert
("Error sending OTP Code. Check logs for more details.");
var console: Console

The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

The module exports two specific components:

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream. * A global console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.

Example using the global console:


const name = 'Will Robinson'; console.warn(`Danger $name! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr ```

Example using the `Console` class:

```js const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err);

myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson'; myConsole.warn(`Danger $name! Danger!`); // Prints: Danger Will Robinson! Danger!, to err ```
console
.
Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)
log
("Error seding OTP CODE: ",
function (local var) e: unknown
e
);
} }; return ( <
class View
View
>
<
class Text
Text
>Enter Your Email to Sign In</
class Text
Text
>
<
class View
View
>
<
class TextInput
TextInput
value?: string | undefined

The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable=false, or set/update maxLength to prevent unwanted edits without flicker.

value
={
const email: string
email
}
onChangeText?: ((text: string) => void) | undefined

Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

onChangeText
={(
val: string
val
) =>
const setEmail: (value: React.SetStateAction<string>) => void
setEmail
(
val: string
val
.
String.toLowerCase(): string

Converts all the alphabetic characters in a string to lowercase.

toLowerCase
())}
placeholder?: string | undefined

The string that will be rendered before text input has been entered

placeholder
="[email protected]"
/> <
const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<View>>
Pressable
PressableProps.onPress?: ((event: GestureResponderEvent) => void) | null | undefined

Called when a single tap gesture is detected.

onPress
={
const handleUserSignInWithOtp: () => void
handleUserSignInWithOtp
}>
{({
pressed: boolean
pressed
}) => (
<
class View
View
style?: StyleProp<ViewStyle>
style
={[
{
ViewStyle.opacity?: AnimatableNumericValue | undefined
opacity
:
pressed: boolean
pressed
? 0.5 : 1,
TransformsStyle.transform?: string | readonly (({ perspective: AnimatableNumericValue; } & { rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; ... 5 more ...; matrix?: undefined; }) | ... 11 more ... | ({ ...; } & { ...; }))[] | undefined
transform
: [
{
scale: AnimatableNumericValue
scale
:
pressed: boolean
pressed
? 0.98 : 1,
}, ], }, ]} > <
class Text
Text
>Sign In</
class Text
Text
>
</
class View
View
>
)} </
const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<View>>
Pressable
>
</
class View
View
>
</
class View
View
>
); }

Prompt the User to enter the One-Time Password to complete authentication

The user will receive an email with a one-time password (OTP) to enter into your app.

Provide a means for the user to enter the OTP into your app and then call the authenticate() function from the useAuthenticate() hook passing the OTP code to the otpCode parameter, and the type set to otp.

import { 
function useAuthenticate(mutationArgs?: UseAuthenticateMutationArgs): UseAuthenticateResult

Hook that provides functions and state for authenticating a user using a signer. It includes methods for both synchronous and asynchronous mutations. Useful if building your own UI components and want to control the authentication flow. For authenticate vs authenticateAsync, use authenticate when you want the hook the handle state changes for you, authenticateAsync when you need to wait for the result to finish processing.

This can be complex for magic link or OTP flows: OPT calls authenticate twice, but this should be handled by the signer.

useAuthenticate
} from "@account-kit/react-native";
import React, {
function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)

Returns a stateful value, and a function to update it.

useState
} from "react";
import {
type Alert = AlertStatic const Alert: AlertStatic
Alert
,
class View
View
,
class Text
Text
,
class TextInput
TextInput
,
class Button
Button
,
const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<View>>
Pressable
} from "react-native";
function
function VerifyOtp(): JSX.Element
VerifyOtp
() {
const {
const authenticate: UseMutateFunction<User, Error, AuthParams, unknown>
authenticate
} =
function useAuthenticate(mutationArgs?: UseAuthenticateMutationArgs): UseAuthenticateResult

Hook that provides functions and state for authenticating a user using a signer. It includes methods for both synchronous and asynchronous mutations. Useful if building your own UI components and want to control the authentication flow. For authenticate vs authenticateAsync, use authenticate when you want the hook the handle state changes for you, authenticateAsync when you need to wait for the result to finish processing.

This can be complex for magic link or OTP flows: OPT calls authenticate twice, but this should be handled by the signer.

useAuthenticate
();
const [
const otpCode: string
otpCode
,
const setOtpCode: React.Dispatch<React.SetStateAction<string>>
setOtpCode
] =
useState<string>(initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] (+1 overload)

Returns a stateful value, and a function to update it.

useState
("");
const
const handleUserVerifyOtp: () => void
handleUserVerifyOtp
= () => {
try {
const authenticate: (variables: AuthParams, options?: MutateOptions<User, Error, AuthParams, unknown> | undefined) => void
authenticate
({
otpCode: string
otpCode
,
type: "otp"
type
: "otp",
}); // OTP verified. User is authenticated. } catch (
function (local var) e: unknown
e
) {
const Alert: AlertStatic
Alert
.
AlertStatic.alert: (title: string, message?: string, buttons?: AlertButton[], options?: AlertOptions) => void
alert
("Error verifying OTP Code. Check logs for more details.");
var console: Console

The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

The module exports two specific components:

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream. * A global console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.

Example using the global console:


const name = 'Will Robinson'; console.warn(`Danger $name! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr ```

Example using the `Console` class:

```js const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err);

myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson'; myConsole.warn(`Danger $name! Danger!`); // Prints: Danger Will Robinson! Danger!, to err ```
console
.
Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)
log
("Error verifying OTP CODE: ",
function (local var) e: unknown
e
);
} }; return ( <
class View
View
>
<
class View
View
>
<
class Text
Text
>Enter Your OTP Code</
class Text
Text
>
<
class View
View
>
<
class TextInput
TextInput
value?: string | undefined

The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable=false, or set/update maxLength to prevent unwanted edits without flicker.

value
={
const otpCode: string
otpCode
}
onChangeText?: ((text: string) => void) | undefined

Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

onChangeText
={
const setOtpCode: React.Dispatch<React.SetStateAction<string>>
setOtpCode
}
placeholder?: string | undefined

The string that will be rendered before text input has been entered

placeholder
="123456"
/> <
const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<View>>
Pressable
PressableProps.onPress?: ((event: GestureResponderEvent) => void) | null | undefined

Called when a single tap gesture is detected.

onPress
={
const handleUserVerifyOtp: () => void
handleUserVerifyOtp
}>
{({
pressed: boolean
pressed
}) => (
<
class View
View
style?: StyleProp<ViewStyle>
style
={[
{
ViewStyle.opacity?: AnimatableNumericValue | undefined
opacity
:
pressed: boolean
pressed
? 0.5 : 1,
TransformsStyle.transform?: string | readonly (({ perspective: AnimatableNumericValue; } & { rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; scaleX?: undefined; ... 5 more ...; matrix?: undefined; }) | ... 11 more ... | ({ ...; } & { ...; }))[] | undefined
transform
: [
{
scale: AnimatableNumericValue
scale
:
pressed: boolean
pressed
? 0.98 : 1,
}, ], }, ]} > <
class Text
Text
>Submit OTP</
class Text
Text
>
</
class View
View
>
)} </
const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<View>>
Pressable
>
</
class View
View
>
</
class View
View
>
</
class View
View
>
); }

Here’s an example of a Sign In component using OTP. Feel free to embed this into your application to give it a try!

import React, { 
function useCallback<T extends Function>(callback: T, deps: React.DependencyList): T

useCallback will return a memoized version of the callback that only changes if one of the inputs has changed.

useCallback
,
function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)

Returns a stateful value, and a function to update it.

useState
} from "react";
import {
class View
View
,
class Text
Text
,
class TextInput
TextInput
,
class Button
Button
} from "react-native";
import {
function useAuthenticate(mutationArgs?: UseAuthenticateMutationArgs): UseAuthenticateResult

Hook that provides functions and state for authenticating a user using a signer. It includes methods for both synchronous and asynchronous mutations. Useful if building your own UI components and want to control the authentication flow. For authenticate vs authenticateAsync, use authenticate when you want the hook the handle state changes for you, authenticateAsync when you need to wait for the result to finish processing.

This can be complex for magic link or OTP flows: OPT calls authenticate twice, but this should be handled by the signer.

useAuthenticate
,
const useUser: () => UseUserResult

A React hook that returns the current user information, either from an External Owned Account (EOA) or from the client store. It uses the Alchemy account context and synchronizes with external store updates. The best way to check if user is logged in for both smart account contract users and EOA.

If using smart contract account, returns address of the signer. If only using smart account contracts then you can use useSignerStatus or useAccount to see if the account is defined.

useUser
} from "@account-kit/react-native";
import {
import OtpPopUp
OtpPopUp
} from "./otp-popup";
export const
const SignInWithOtp: () => JSX.Element
SignInWithOtp
= () => {
const [
const email: string
email
,
const setEmail: React.Dispatch<React.SetStateAction<string>>
setEmail
] =
useState<string>(initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] (+1 overload)

Returns a stateful value, and a function to update it.

useState
<string>("");
const [
const showOtp: boolean
showOtp
,
const setShowOtp: React.Dispatch<React.SetStateAction<boolean>>
setShowOtp
] =
useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)

Returns a stateful value, and a function to update it.

useState
<boolean>(false);
const [
const loading: boolean
loading
,
const setLoading: React.Dispatch<React.SetStateAction<boolean>>
setLoading
] =
useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)

Returns a stateful value, and a function to update it.

useState
<boolean>(false);
const {
const authenticate: UseMutateFunction<User, Error, AuthParams, unknown>
authenticate
} =
function useAuthenticate(mutationArgs?: UseAuthenticateMutationArgs): UseAuthenticateResult

Hook that provides functions and state for authenticating a user using a signer. It includes methods for both synchronous and asynchronous mutations. Useful if building your own UI components and want to control the authentication flow. For authenticate vs authenticateAsync, use authenticate when you want the hook the handle state changes for you, authenticateAsync when you need to wait for the result to finish processing.

This can be complex for magic link or OTP flows: OPT calls authenticate twice, but this should be handled by the signer.

useAuthenticate
();
const {
const user: any
user
} =
function useUser(): UseUserResult

A React hook that returns the current user information, either from an External Owned Account (EOA) or from the client store. It uses the Alchemy account context and synchronizes with external store updates. The best way to check if user is logged in for both smart account contract users and EOA.

If using smart contract account, returns address of the signer. If only using smart account contracts then you can use useSignerStatus or useAccount to see if the account is defined.

useUser
();
// Make an authentication request to a user's email const
const performAuthRequest: (email: string) => void
performAuthRequest
=
useCallback<(email: string) => void>(callback: (email: string) => void, deps: React.DependencyList): (email: string) => void

useCallback will return a memoized version of the callback that only changes if one of the inputs has changed.

useCallback
(
(
email: string
email
: string) => {
try {
const authenticate: (variables: AuthParams, options?: MutateOptions<User, Error, AuthParams, unknown> | undefined) => void
authenticate
({
email: string
email
,
type: "email"
type
: "email",
emailMode?: "otp" | "magicLink" | undefined
emailMode
: "otp",
});
const setLoading: (value: React.SetStateAction<boolean>) => void
setLoading
(true);
const setShowOtp: (value: React.SetStateAction<boolean>) => void
setShowOtp
(true);
} catch (
function (local var) e: unknown
e
) {
any
Alert
.
any
alert
("Error sending OTP Code. Check logs for more details.");
var console: Console

The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

The module exports two specific components:

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream. * A global console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.

Example using the global console:


const name = 'Will Robinson'; console.warn(`Danger $name! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr ```

Example using the `Console` class:

```js const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err);

myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson'; myConsole.warn(`Danger $name! Danger!`); // Prints: Danger Will Robinson! Danger!, to err ```
console
.
Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)

Prints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).

js const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout

See util.format() for more information.

log
("Error seding OTP CODE: ",
function (local var) e: unknown
e
);
} }, [
const authenticate: UseMutateFunction<User, Error, AuthParams, unknown>
authenticate
],
); const
const completeAuth: () => void
completeAuth
=
useCallback<() => void>(callback: () => void, deps: React.DependencyList): () => void

useCallback will return a memoized version of the callback that only changes if one of the inputs has changed.

useCallback
(() => {
const setLoading: (value: React.SetStateAction<boolean>) => void
setLoading
(false);
const setShowOtp: (value: React.SetStateAction<boolean>) => void
setShowOtp
(false);
}, []); return ( <
class View
View
>
{
const user: any
user
&& (
<> <
class Text
Text
>User Authenticated As: {
const user: any
user
.
any
email
}</
class Text
Text
>
<
class Text
Text
>{
const user: any
user
.
any
address
}</
class Text
Text
>
</> )} <
class Text
Text
style?: StyleProp<TextStyle>
style
={{
TextStyle.fontSize?: number | undefined
fontSize
: 16 }}>Enter Email</
class Text
Text
>
<
class TextInput
TextInput
value?: string | undefined

The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable=false, or set/update maxLength to prevent unwanted edits without flicker.

value
={
const email: string
email
}
style?: StyleProp<TextStyle>

Styles

style
={{
TextStyle.fontSize?: number | undefined
fontSize
: 20 }}
onChangeText?: ((text: string) => void) | undefined

Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

onChangeText
={
const setEmail: React.Dispatch<React.SetStateAction<string>>
setEmail
}
placeholder?: string | undefined

The string that will be rendered before text input has been entered

placeholder
="Enter Email"
autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined

Can tell TextInput to automatically capitalize certain characters. characters: all characters, words: first letter of each word sentences: first letter of each sentence (default) none: don't auto capitalize anything

https://reactnative.dev/docs/textinput#autocapitalize

autoCapitalize
="none"
/> <
class Button
Button
title: string

Text to display inside the button. On Android the given title will be converted to the uppercased form.

title
={
const loading: boolean
loading
? "Loading" : "Sign In"}
disabled?: boolean | undefined

If true, disable all interactions for this component.

disabled
={
const loading: boolean
loading
}
onPress?: ((event: GestureResponderEvent) => void) | undefined

Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).

onPress
={() =>
const performAuthRequest: (email: string) => void
performAuthRequest
(
const email: string
email
)}
/> <
import OtpPopUp
OtpPopUp
show: boolean
show
={
const showOtp: boolean
showOtp
}
completeAuth: () => void
completeAuth
={
const completeAuth: () => void
completeAuth
}
close: () => void
close
={() => {
const setShowOtp: (value: React.SetStateAction<boolean>) => void
setShowOtp
(false);
const setLoading: (value: React.SetStateAction<boolean>) => void
setLoading
(false);
}} /> </
class View
View
>
); };
import React, { 
function useCallback<T extends Function>(callback: T, deps: React.DependencyList): T

useCallback will return a memoized version of the callback that only changes if one of the inputs has changed.

useCallback
,
function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)

Returns a stateful value, and a function to update it.

useState
} from "react";
import {
class Modal
Modal
,
class Text
Text
,
class TextInput
TextInput
,
class Button
Button
,
class SafeAreaView
SafeAreaView
,
type Alert = AlertStatic const Alert: AlertStatic
Alert
,
} from "react-native"; import {
function useAuthenticate(mutationArgs?: UseAuthenticateMutationArgs): UseAuthenticateResult

Hook that provides functions and state for authenticating a user using a signer. It includes methods for both synchronous and asynchronous mutations. Useful if building your own UI components and want to control the authentication flow. For authenticate vs authenticateAsync, use authenticate when you want the hook the handle state changes for you, authenticateAsync when you need to wait for the result to finish processing.

This can be complex for magic link or OTP flows: OPT calls authenticate twice, but this should be handled by the signer.

useAuthenticate
} from "@account-kit/react-native";
export const
const OtpPopUp: ({ show, completeAuth, close, }: { show: boolean; completeAuth: () => void; close: () => void; }) => JSX.Element
OtpPopUp
= ({
show: boolean
show
,
completeAuth: () => void
completeAuth
,
close: () => void
close
,
}: {
show: boolean
show
: boolean;
completeAuth: () => void
completeAuth
: () => void;
close: () => void
close
: () => void;
}) => { const {
const authenticate: UseMutateFunction<User, Error, AuthParams, unknown>
authenticate
} =
function useAuthenticate(mutationArgs?: UseAuthenticateMutationArgs): UseAuthenticateResult

Hook that provides functions and state for authenticating a user using a signer. It includes methods for both synchronous and asynchronous mutations. Useful if building your own UI components and want to control the authentication flow. For authenticate vs authenticateAsync, use authenticate when you want the hook the handle state changes for you, authenticateAsync when you need to wait for the result to finish processing.

This can be complex for magic link or OTP flows: OPT calls authenticate twice, but this should be handled by the signer.

useAuthenticate
();
const [
const otpCode: string
otpCode
,
const setOtpCode: React.Dispatch<React.SetStateAction<string>>
setOtpCode
] =
useState<string>(initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] (+1 overload)

Returns a stateful value, and a function to update it.

useState
<string>("");
const [
const loading: boolean
loading
,
const setLoading: React.Dispatch<React.SetStateAction<boolean>>
setLoading
] =
useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)

Returns a stateful value, and a function to update it.

useState
<boolean>(false);
// Authenticate a user using a bundle returned from a deep link const
const handleUserOtp: (otpCode: string) => void
handleUserOtp
=
useCallback<(otpCode: string) => void>(callback: (otpCode: string) => void, deps: React.DependencyList): (otpCode: string) => void

useCallback will return a memoized version of the callback that only changes if one of the inputs has changed.

useCallback
(
(
otpCode: string
otpCode
: string) => {
try {
const setLoading: (value: React.SetStateAction<boolean>) => void
setLoading
(true);
const authenticate: (variables: AuthParams, options?: MutateOptions<User, Error, AuthParams, unknown> | undefined) => void
authenticate
({
otpCode: string
otpCode
,
type: "otp"
type
: "otp" }); //<-- Pass the user's OTP code to the authenticate method using `otp` as the type value
completeAuth: () => void
completeAuth
();
} catch (
function (local var) e: unknown
e
) {
const Alert: AlertStatic
Alert
.
AlertStatic.alert: (title: string, message?: string, buttons?: AlertButton[], options?: AlertOptions) => void
alert
("Error verifying OTP Code. Check logs for more details.");
var console: Console

The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

The module exports two specific components:

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream. * A global console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.

Example using the global console:


const name = 'Will Robinson'; console.warn(`Danger $name! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr ```

Example using the `Console` class:

```js const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err);

myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson'; myConsole.warn(`Danger $name! Danger!`); // Prints: Danger Will Robinson! Danger!, to err ```
console
.
Console.log(message?: any, ...optionalParams: any[]): void (+2 overloads)

Prints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).

js const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout

See util.format() for more information.

log
("Error verifying OTP CODE: ",
function (local var) e: unknown
e
);
} }, [
const authenticate: UseMutateFunction<User, Error, AuthParams, unknown>
authenticate
],
); return ( <
class Modal
Modal
visible?: boolean | undefined

The visible prop determines whether your modal is visible.

visible
={
show: boolean
show
}
style?: StyleProp<ViewStyle>
style
={{
FlexStyle.paddingTop?: DimensionValue | undefined
paddingTop
: 200 }}>
<
class SafeAreaView
SafeAreaView
style?: StyleProp<ViewStyle>
style
={{
FlexStyle.margin?: DimensionValue | undefined
margin
: 20 }}>
<
class Text
Text
style?: StyleProp<TextStyle>
style
={{
TextStyle.fontSize?: number | undefined
fontSize
: 16 }}>Enter OTP</
class Text
Text
>
<
class TextInput
TextInput
style?: StyleProp<TextStyle>

Styles

style
={{
TextStyle.fontSize?: number | undefined
fontSize
: 20 }}
value?: string | undefined

The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set editable=false, or set/update maxLength to prevent unwanted edits without flicker.

value
={
const otpCode: string
otpCode
}
onChangeText?: ((text: string) => void) | undefined

Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

onChangeText
={
const setOtpCode: React.Dispatch<React.SetStateAction<string>>
setOtpCode
}
placeholder?: string | undefined

The string that will be rendered before text input has been entered

placeholder
="Enter OTP"
/> <
class Button
Button
title: string

Text to display inside the button. On Android the given title will be converted to the uppercased form.

title
={
const loading: boolean
loading
? "Loading" : "Submit OTP"}
disabled?: boolean | undefined

If true, disable all interactions for this component.

disabled
={
const loading: boolean
loading
}
onPress?: ((event: GestureResponderEvent) => void) | undefined

Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).

onPress
={() =>
const handleUserOtp: (otpCode: string) => void
handleUserOtp
(
const otpCode: string
otpCode
)}
/> <
class Button
Button
title: string

Text to display inside the button. On Android the given title will be converted to the uppercased form.

title
="Close"
onPress?: ((event: GestureResponderEvent) => void) | undefined

Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).

onPress
={() => {
const setLoading: (value: React.SetStateAction<boolean>) => void
setLoading
(false);
close: () => void
close
();
}} /> </
class SafeAreaView
SafeAreaView
>
</
class Modal
Modal
>
); };