Adding and Removing Login Methods

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 { const useListAuthMethods: () => UseQueryResult<AuthMethods>A hook to list the authentication methods for a user.
useListAuthMethods } from "@account-kit/react";

export default function function MyPage(): JSX.Element
MyPage() {
  const { data: AuthMethods | undefinedThe last successfully resolved data for the query.
The last successfully resolved data for the query.
The last successfully resolved data for the query.
The last successfully resolved data for the query.
The last successfully resolved data for the query.
The last successfully resolved data for the query.
data: const authMethods: AuthMethods | undefinedThe last successfully resolved data for the query.
authMethods } = function useListAuthMethods(): UseQueryResult<AuthMethods>A hook to list the authentication methods for a user.
useListAuthMethods();

  if (!const authMethods: AuthMethods | undefinedThe last successfully resolved data for the query.
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>;
  }

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>Email: {const authMethods: AuthMethodsThe last successfully resolved data for the query.
authMethods.email?: string | undefined
email}</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      {const authMethods: AuthMethodsThe last successfully resolved data for the query.
authMethods.oauthProviders: OauthProviderInfo[]
oauthProviders.Array<OauthProviderInfo>.map<JSX.Element>(callbackfn: (value: OauthProviderInfo, index: number, array: OauthProviderInfo[]) => JSX.Element, thisArg?: any): JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
map((oauthProvider: OauthProviderInfo
oauthProvider) => (
        <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div React.Attributes.key?: React.Key | null | undefined
key={oauthProvider: OauthProviderInfo
oauthProvider.providerId: string
providerId}>
          {oauthProvider: OauthProviderInfo
oauthProvider.providerName?: string | undefined
providerName}: {oauthProvider: OauthProviderInfo
oauthProvider.userDisplayName?: string | undefined
userDisplayName}
        </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      ))}
      {const authMethods: AuthMethodsThe last successfully resolved data for the query.
authMethods.passkeys: PasskeyInfo[]
passkeys.Array<PasskeyInfo>.map<JSX.Element>(callbackfn: (value: PasskeyInfo, index: number, array: PasskeyInfo[]) => JSX.Element, thisArg?: any): JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
map((passkey: PasskeyInfo
passkey) => (
        <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div React.Attributes.key?: React.Key | null | undefined
key={passkey: PasskeyInfo
passkey.authenticatorId: string
authenticatorId}>
          Passkey created at: {new var Date: DateConstructor
new (value: number | string | Date) => Date (+3 overloads)
Date(passkey: PasskeyInfo
passkey.createdAt: number
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()}
        </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      ))}
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

Setting email auth

To set an account’s email, use the useSendVerificationCode and useSetEmail hooks. Emails must be verified before they are set.

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 { function useSetEmail(mutationArgs?: UseSetEmailMutationArgs): UseSetEmailResultA custom hook to set an email address for an already authenticated account.
Note: You should first use the useSendVerificationCode hook to send a verification code to the email address before calling this hook.
useSetEmail, function useSendVerificationCode(mutationArgs?: UseSendVerificationCodeMutationArgs): UseSendVerificationCodeResultA custom hook to send OTP verification codes to email or SMS for account verification.
useSendVerificationCode } from "@account-kit/react";

export default function function MyPage(): JSX.Element
MyPage() {
  const { const sendVerificationCode: UseMutateFunction<void, Error, SendVerificationCodeParams, unknown>
sendVerificationCode } = function useSendVerificationCode(mutationArgs?: UseSendVerificationCodeMutationArgs): UseSendVerificationCodeResultA custom hook to send OTP verification codes to email or SMS for account verification.
useSendVerificationCode();
  const { const setEmail: UseMutateFunction<void, Error, SetEmailParams, unknown>
setEmail } = function useSetEmail(mutationArgs?: UseSetEmailMutationArgs): UseSetEmailResultA custom hook to set an email address for an already authenticated account.
Note: You should first use the useSendVerificationCode hook to send a verification code to the email address before calling this hook.
useSetEmail();

  return (
    <>
      <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button
        React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={() => {
          const sendVerificationCode: (variables: SendVerificationCodeParams, options?: MutateOptions<void, Error, SendVerificationCodeParams, unknown> | undefined) => void
sendVerificationCode({
            SendVerificationCodeParams.type: "email" | "sms"
type: "email",
            SendVerificationCodeParams.contact: string
contact: "[email protected]",
          });
        }}
      >
        Send verification code
      </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
      <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button
        React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={() =>
          const setEmail: (variables: SetEmailParams, options?: MutateOptions<void, Error, SetEmailParams, unknown> | undefined) => void
setEmail({
            verificationCode: string
verificationCode: "code user received in email",
          })
        }
      >
        Update email
      </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
    </>
  );
}

Removing email auth

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

import { function useRemoveEmail(mutationArgs?: UseRemoveEmailMutationArgs): UseRemoveEmailResultA custom hook to handle the removal of an email from an already authenticated account, which includes executing a mutation with optional parameters.
useRemoveEmail } from "@account-kit/react";

export default function function MyPage(): JSX.Element
MyPage() {
  const { const removeEmail: UseMutateFunction<void, Error, void, unknown>
removeEmail } = function useRemoveEmail(mutationArgs?: UseRemoveEmailMutationArgs): UseRemoveEmailResultA custom hook to handle the removal of an email from an already authenticated account, which includes executing a mutation with optional parameters.
useRemoveEmail();

  return <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={() => const removeEmail: (variables: void, options?: MutateOptions<void, Error, void, unknown> | undefined) => void
removeEmail()}>Remove email</React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
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 { function useAddOauthProvider(mutationArgs?: UseAddOauthProviderMutationArgs): UseAddOauthProviderResultA custom hook to handle adding an OAuth provider to an already authenticated account, which includes executing a mutation with optional parameters.
useAddOauthProvider } from "@account-kit/react";

export default function function MyPage(): JSX.Element
MyPage() {
  const { const addOauthProvider: UseMutateFunction<OauthProviderInfo, Error, Omit<{
    type: "oauth";
    scope?: string;
    claims?: string;
    otherParameters?: Record<string, string>;
} & (OauthProviderConfig & OauthRedirectConfig), "type">, unknown>
addOauthProvider } = function useAddOauthProvider(mutationArgs?: UseAddOauthProviderMutationArgs): UseAddOauthProviderResultA custom hook to handle adding an OAuth provider to an already authenticated account, which includes executing a mutation with optional parameters.
useAddOauthProvider();

  return (
    <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button
      React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={() =>
        const addOauthProvider: (variables: Omit<{
    type: "oauth";
    scope?: string;
    claims?: string;
    otherParameters?: Record<string, string>;
} & (OauthProviderConfig & OauthRedirectConfig), "type">, options?: MutateOptions<OauthProviderInfo, Error, Omit<{
    type: "oauth";
    scope?: string;
    claims?: string;
    otherParameters?: Record<string, string>;
} & (OauthProviderConfig & OauthRedirectConfig), "type">, unknown> | undefined) => void
addOauthProvider({
          authProviderId: string
authProviderId: "google",
          mode: "redirect" | "popup"
mode: "popup",
        })
      }
    >
      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 { const useListAuthMethods: () => UseQueryResult<AuthMethods>A hook to list the authentication methods for a user.
useListAuthMethods, function useRemoveOauthProvider(mutationArgs?: UseRemoveOauthProviderMutationArgs): UseRemoveOauthProviderResultA custom hook to handle removing an OAuth provider from an already authenticated account, which includes executing a mutation with optional parameters.
useRemoveOauthProvider } from "@account-kit/react";

export default function function MyPage(): JSX.Element
MyPage() {
  const { data: AuthMethods | undefinedThe last successfully resolved data for the query.
The last successfully resolved data for the query.
The last successfully resolved data for the query.
The last successfully resolved data for the query.
The last successfully resolved data for the query.
The last successfully resolved data for the query.
data: const authMethods: AuthMethods | undefinedThe last successfully resolved data for the query.
authMethods } = function useListAuthMethods(): UseQueryResult<AuthMethods>A hook to list the authentication methods for a user.
useListAuthMethods();
  const { const removeOauthProvider: UseMutateFunction<void, Error, string, unknown>
removeOauthProvider } = function useRemoveOauthProvider(mutationArgs?: UseRemoveOauthProviderMutationArgs): UseRemoveOauthProviderResultA custom hook to handle removing an OAuth provider from an already authenticated account, which includes executing a mutation with optional parameters.
useRemoveOauthProvider();

  if (!const authMethods: AuthMethods | undefinedThe last successfully resolved data for the query.
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: (variables: string, options?: MutateOptions<void, Error, string, unknown> | undefined) => void
removeOauthProvider(const authMethods: AuthMethodsThe last successfully resolved data for the query.
authMethods.oauthProviders: OauthProviderInfo[]
oauthProviders[0].providerId: string
providerId);
  };

  return (
    <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={const removeFirstOauthProvider: () => void
removeFirstOauthProvider}>Remove OAuth provider</React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
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";

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 <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={() => const addPasskey: (variables: void | CredentialCreationOptions | undefined, options?: MutateOptions<string[], Error, void | CredentialCreationOptions | undefined, unknown> | undefined) => void
addPasskey()}>Add passkey</React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
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 { const useListAuthMethods: () => UseQueryResult<AuthMethods>A hook to list the authentication methods for a user.
useListAuthMethods, function useRemovePasskey(mutationArgs?: UseRemovePasskeyMutationArgs): UseRemovePasskeyResultA custom hook to handle the addition of a passkey to an already authenticated account, which includes executing a mutation with optional parameters.
useRemovePasskey } from "@account-kit/react";

export default function function MyPage(): JSX.Element
MyPage() {
  const { data: AuthMethods | undefinedThe last successfully resolved data for the query.
The last successfully resolved data for the query.
The last successfully resolved data for the query.
The last successfully resolved data for the query.
The last successfully resolved data for the query.
The last successfully resolved data for the query.
data: const authMethods: AuthMethods | undefinedThe last successfully resolved data for the query.
authMethods } = function useListAuthMethods(): UseQueryResult<AuthMethods>A hook to list the authentication methods for a user.
useListAuthMethods();
  const { const removePasskey: UseMutateFunction<void, Error, string, unknown>
removePasskey } = function useRemovePasskey(mutationArgs?: UseRemovePasskeyMutationArgs): UseRemovePasskeyResultA custom hook to handle the addition of a passkey to an already authenticated account, which includes executing a mutation with optional parameters.
useRemovePasskey();

  if (!const authMethods: AuthMethods | undefinedThe last successfully resolved data for the query.
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: (variables: string, options?: MutateOptions<void, Error, string, unknown> | undefined) => void
removePasskey(const authMethods: AuthMethodsThe last successfully resolved data for the query.
authMethods.passkeys: PasskeyInfo[]
passkeys[0].authenticatorId: string
authenticatorId);
  };

  return <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={const removeFirstPasskey: () => void
removeFirstPasskey}>Remove passkey</React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
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.