Authenticating Users via Social Auth

Authenticate a User via Social Auth

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:

import React from "react";
import { 
class View
View, 
class Text
Text, 
const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<View>>
Pressable, 
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";

function 
function SignInWithSocialAuth(): JSX.Element
SignInWithSocialAuth() {
  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 handleUserSignInWithGoogle: () => void
handleUserSignInWithGoogle = () => {
    try {
      
const authenticate: (variables: AuthParams, options?: MutateOptions<User, Error, AuthParams, unknown> | undefined) => void
authenticate({
        
type: "oauth"
type: "oauth",
        
redirectUrl: string
redirectUrl: "<your-app-scheme>://<your-auth-callback-route>",
        
mode: "redirect"
mode: "redirect",
        
authProviderId: "google"
authProviderId: "google",
      });
    } catch (
function (local var) e: unknown
e) {
      
const Alert: AlertStatic
Alert.
AlertStatic.alert: (title: string, message?: string, buttons?: AlertButton[], options?: AlertOptions) => void
alert("Error authenticating user. 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 authenticating user: ", 
function (local var) e: unknown
e);
    }
  };

  return (
    <
class View
View>
      <
class Text
Text>Sign In with Google</
class Text
Text>
      <
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 handleUserSignInWithGoogle: () => void
handleUserSignInWithGoogle}>
        <
class Text
Text>Sign In</
class Text
Text>
      </
const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<View>>
Pressable>
    </
class View
View>
  );
}