Authenticating Users via Social Auth

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.

To authenticate a user via social auth, use the authenticate() function from the useAuthenticate() hook with the type set to OAuth, the redirectUrl set to your app’s deep link, the mode set to redirect and the authProviderId set to the social auth provider you want to use.

Here is an example, authenticating a user via Google:

[example.tsx]

1 import React from "react";
2 import { View, Text, Pressable, Alert } from "react-native";
3 import { useAuthenticate } from "@account-kit/react-native";
4 
5 function SignInWithSocialAuth() {
6   const { authenticate } = useAuthenticate();
7 
8   const handleUserSignInWithGoogle = () => {
9     try {
10       authenticate({
11         type: "oauth",
12         redirectUrl: "<your-app-scheme>://<your-auth-callback-route>",
13         mode: "redirect",
14         authProviderId: "google",
15       });
16     } catch (e) {
17       Alert.alert("Error authenticating user. Check logs for more details.");
18 
19       console.log("Error authenticating user: ", e);
20     }
21   };
22 
23   return (
24     <View>
25       <Text>Sign In with Google</Text>
26       <Pressable onPress={handleUserSignInWithGoogle}>
27         <Text>Sign In</Text>
28       </Pressable>
29     </View>
30   );
31 }

Ensure that you have added your app’s scheme to your Whitelisted Origins in the Alchemy Dashboard.