React NativeAuthentication methods

Authenticating Users via Magic Link

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.

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 Magic Link

    Email Mode Magic Link

  • Click the Save Changes button

To send an email magic link to a user, you can use the authenticate() function from the useAuthenticate() hook with the type set to email and the emailMode set to magicLink.

[sign-in-with-magic-link.tsx]
1import { useAuthenticate } from "@account-kit/react-native";
2import React, { useState } from "react";
3import { Alert, View, Text, TextInput, Button, Pressable } from "react-native";
4
5function SignInWithOtp() {
6  const { authenticate } = useAuthenticate();
7  const [email, setEmail] = useState("");
8
9  const handleUserSignInWithMagicLink = () => {
10    try {
11      authenticate({
12        email,
13        type: "email",
14      });
15
16      // Magic link sent to the user's email. Prompt the user to click the link in their email.
17    } catch (e) {
18      Alert.alert("Error sending Magic Link. Check logs for more details.");
19
20      console.log("Error sending Magic Link: ", e);
21    }
22  };
23
24  return (
25    <View>
26      <Text>Enter Your Email to Sign In</Text>
27      <View>
28        <TextInput
29          value={email}
30          onChangeText={(val) => setEmail(val.toLowerCase())}
31          placeholder="[email protected]"
32        />
33        <Pressable onPress={handleUserSignInWithMagicLink}>
34          {({ pressed }) => (
35            <View
36              style={[
37                {
38                  opacity: pressed ? 0.5 : 1,
39                  transform: [
40                    {
41                      scale: pressed ? 0.98 : 1,
42                    },
43                  ],
44                },
45              ]}
46            >
47              <Text>Sign In</Text>
48            </View>
49          )}
50        </Pressable>
51      </View>
52    </View>
53  );
54}

When a user clicks on the magic link in their email, it should deep link to your app if this has been setup correctly.

A bundle parameter present in the deep link url will be used to authenticate the user and save the user’s session.

Here’s an example of what this might look like:

[example.tsx]
1import { useEffect } from "react";
2import { Linking } from "react-native";
3import { useAuthenticate } from "@account-kit/react-native";
4
5const App = () => {
6  const { authenticate } = useAuthenticate();
7
8  // Authenticate a user using a bundle returned from a deep link
9  const handleUserAuth = async ({ bundle }: { bundle: string }) => {
10    authenticate({ bundle, type: "email" });
11  };
12
13  // Handle incoming deep links and authenticate the user
14  const handleIncomingURL = (event: { url: string }) => {
15    const regex = /[?&]([^=#]+)=([^&#]*)/g;
16
17    let params: Record<string, string> = {};
18    let match: RegExpExecArray | null;
19
20    while ((match = regex.exec(event.url))) {
21      if (match[1] && match[2]) {
22        params[match[1]] = match[2];
23      }
24    }
25
26    if (!params.bundle) {
27      return;
28    }
29
30    handleUserAuth({
31      bundle: params.bundle ?? "",
32    });
33  };
34
35  // Create a subscription to handle incoming deep links
36  useEffect(() => {
37    const subscription = Linking.addEventListener("url", handleIncomingURL);
38
39    return () => subscription.remove();
40  }, []);
41
42  return null;
43};