Adding and Removing Auth Methods

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.

If your user has already authenticated with email, social auth, or a passkey, you can add additional login methods to their account or remove currently enabled methods from their account. This is useful in the case that you want to give your users the ability to customize their login methods after their account is created.

Viewing the currently enabled auth methods

To view the enabled auth methods for the currently logged in user, use the useListAuthMethods hook:

import { import useListAuthMethods
useListAuthMethods } from "@account-kit/react";
import { class Text
Text, class View
View } from "react-native";

export default function function MyPage(): JSX.Element
MyPage() {
  const { any
data: const authMethods: any
authMethods } = import useListAuthMethods
useListAuthMethods();

  if (!const authMethods: any
authMethods) {
    return <class View
View>Loading…</class View
View>;
  }

  return (
    <class View
View>
      <class Text
Text>Email: {const authMethods: any
authMethods.any
email}</class Text
Text>
      {const authMethods: any
authMethods.any
oauthProviders.any
map((oauthProvider: any
oauthProvider) => (
        <class Text
Text React.Attributes.key?: React.Key | null | undefined
key={oauthProvider: any
oauthProvider.any
providerId}>
          {oauthProvider: any
oauthProvider.any
providerName}: {oauthProvider: any
oauthProvider.any
userDisplayName}
        </class Text
Text>
      ))}
      {const authMethods: any
authMethods.any
passkeys.any
map((passkey: any
passkey) => (
        <class Text
Text React.Attributes.key?: React.Key | null | undefined
key={passkey: any
passkey.any
authenticatorId}>
          Passkey created at: {new var Date: DateConstructor
new (value: number | string | Date) => Date (+3 overloads)
Date(passkey: any
passkey.any
createdAt).Date.toLocaleString(locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string (+2 overloads)Converts a date and time to a string by using the current or specified locale.
toLocaleString()}
        </class Text
Text>
      ))}
    </class View
View>
  );
}

Setting email auth

To set an account’s email, use the useSetEmail hook.

If you set a user’s email, it is critical that you verify that they own the email first, to prevent malicious users from squatting on emails that have not yet been added to accounts.

Because of the security implications, the ability to set emails on existing accounts is disabled by default. If you would like it enabled for your team, please reach out.

An account may have at most one email address associated with it. If an account already has an email and you call this function, then the existing email will be removed.

import { import useSetEmail
useSetEmail } from "@account-kit/react";
import { class Button
Button } from "react-native";

export default function function MyPage(): JSX.Element
MyPage() {
  const { const setEmail: any
setEmail } = import useSetEmail
useSetEmail();

  return (
    <class Button
Button onPress?: ((event: GestureResponderEvent) => void) | undefinedCalled when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).
onPress={() => const setEmail: any
setEmail("[email protected]")}>Change email</class Button
Button>
  );
}

Removing email auth

To remove an account’s email, use the useRemoveEmail hook.

import { import useRemoveEmail
useRemoveEmail } from "@account-kit/react";
import { class Button
Button } from "react-native";

export default function function MyPage(): JSX.Element
MyPage() {
  const { const removeEmail: any
removeEmail } = import useRemoveEmail
useRemoveEmail();

  return (
    <class Button
Button onPress?: ((event: GestureResponderEvent) => void) | undefinedCalled when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).
onPress={() => const removeEmail: any
removeEmail())any
}>any
Remove any
email</class Button
Button>
  );
}

Note that you cannot remove the last auth method from an account. If removing email login would leave no auth methods, then this call will fail.

Adding OAuth providers

To add an OAuth provider, use the useAddOauthProvider hook.

import { import useAddOauthProvider
useAddOauthProvider } from "@account-kit/react";
import { class Button
Button } from "react-native";

export default function function MyPage(): JSX.Element
MyPage() {
  const { const addOauthProvider: any
addOauthProvider } = import useAddOauthProvider
useAddOauthProvider();

  return (
    <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button
      onPress: () => any
onPress={() =>
        const addOauthProvider: any
addOauthProvider({
          redirectUrl: string
redirectUrl: "<your-app-scheme>://<your-auth-callback-route>",
          mode: string
mode: "redirect",
          authProviderId: string
authProviderId: "google",
        })
      }
    >
      Add Google
    </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
  );
}

When this button is clicked, the user will be prompted to log in to a social account. Once they do, that account will be added as an auth method to the current user.

The options that can be passed to addOauthProvider match those which can be passed to authenticate when logging in with an OAuth provider. For information on these options and the required setup for enabling OAuth providers, see the Social Login documentation.

Removing OAuth providers

To remove an OAuth provider, use the removeOauthProvider() hook, then pass the OAuth provider’s provider id to removeOauth. To find the provider id, you can examine the value returned from useListAuthMethods().

import { import useListAuthMethods
useListAuthMethods, import useRemoveOauthProvider
useRemoveOauthProvider } from "@account-kit/react";
import { class Button
Button } from "react-native";

export default function function MyPage(): JSX.Element
MyPage() {
  const { any
data: const authMethods: any
authMethods } = import useListAuthMethods
useListAuthMethods();
  const { const removeOauthProvider: any
removeOauthProvider } = import useRemoveOauthProvider
useRemoveOauthProvider();

  if (!const authMethods: any
authMethods) {
    return <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>Loading…</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>;
  }

  const const removeFirstOauthProvider: () => void
removeFirstOauthProvider = () => {
    const removeOauthProvider: any
removeOauthProvider(const authMethods: any
authMethods.any
oauthProviders[0].any
providerId);
  };

  return (
    <class Button
Button onPress?: ((event: GestureResponderEvent) => void) | undefinedCalled when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).
onPress={const removeFirstOauthProvider: () => void
removeFirstOauthProvider}>Remove OAuth provider</class Button
Button>
  );
}

Note that you cannot remove the last auth method from an account. If removing a social login would leave no auth methods, then this call will fail.

Adding passkeys

To add a passkey, use the useAddPasskey hook.

import { function useAddPasskey(mutationArgs?: UseAddPasskeyMutationArgs): UseAddPasskeyResultA custom hook to handle the addition of a passkey to an already authenticated account, which includes executing a mutation with optional parameters.
useAddPasskey } from "@account-kit/react";
import { class Button
Button } from "react-native";

export default function function MyPage(): JSX.Element
MyPage() {
  const { const addPasskey: UseMutateFunction<string[], Error, void | CredentialCreationOptions | undefined, unknown>
addPasskey } = function useAddPasskey(mutationArgs?: UseAddPasskeyMutationArgs): UseAddPasskeyResultA custom hook to handle the addition of a passkey to an already authenticated account, which includes executing a mutation with optional parameters.
useAddPasskey();

  return (
    <class Button
Button onPress?: ((event: GestureResponderEvent) => void) | undefinedCalled when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).
onPress={() => const addPasskey: (variables: void | CredentialCreationOptions | undefined, options?: MutateOptions<string[], Error, void | CredentialCreationOptions | undefined, unknown> | undefined) => void
addPasskey())any
}>any
Add any
passkey</class Button
Button>
  );
}

This will prompt the user to create a passkey which will then be added as a login method to the account.

Removing passkeys

To remove a passkey, use the useRemovePasskey hook and pass the passkey’s authenticator id to the removePasskey function. To find the authenticator id, you can examine the value returned from useListAuthMethods().

import { import useListAuthMethods
useListAuthMethods, import useRemoveOauthProvider
useRemoveOauthProvider } from "@account-kit/react";
import { class Button
Button } from "react-native";

export default function function MyPage(): JSX.Element
MyPage() {
  const { any
data: const authMethods: any
authMethods } = import useListAuthMethods
useListAuthMethods();
  const { const removePasskey: any
removePasskey } = any
useRemovePasskey();

  if (!const authMethods: any
authMethods) {
    return <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>Loading…</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>;
  }

  const const removeFirstPasskey: () => void
removeFirstPasskey = () => {
    const removePasskey: any
removePasskey(const authMethods: any
authMethods.any
passkeys[0].any
authenticatorId);
  };

  return <class Button
Button onClick: () => void
onClick={const removeFirstPasskey: () => void
removeFirstPasskey}>Remove passkey</class Button
Button>;
}

Note that you cannot remove the last auth method from an account. If removing a passkey would leave no auth methods, then this call will fail.