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 { import useListAuthMethods
useListAuthMethods } from "@account-kit/react";

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

  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>;
  }

  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: any
authMethods.any
email}</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      {const authMethods: any
authMethods.any
oauthProviders.any
map((oauthProvider: any
oauthProvider) => (
        <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div React.Attributes.key?: React.Key | null | undefined
key={oauthProvider: any
oauthProvider.any
providerId}>
          {oauthProvider: any
oauthProvider.any
providerName}: {oauthProvider: any
oauthProvider.any
userDisplayName}
        </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      ))}
      {const authMethods: any
authMethods.any
passkeys.any
map((passkey: any
passkey) => (
        <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div 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()}
        </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 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";

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

  return (
    <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={() => const setEmail: any
setEmail("[email protected]")}>Change 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 { import useRemoveEmail
useRemoveEmail } from "@account-kit/react";

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

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

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
      React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
onClick={() =>
        const addOauthProvider: any
addOauthProvider({
          authProviderId: string
authProviderId: "google",
          mode: string
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 { import useListAuthMethods
useListAuthMethods, import useRemoveOauthProvider
useRemoveOauthProvider } from "@account-kit/react";

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 (
    <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())any
}>any
Add any
passkey</any
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 useRemovePasskey
useRemovePasskey } from "@account-kit/react";

export default function function MyPage(): JSX.Element
MyPage() {
  const { any
data: const authMethods: any
authMethods } = import useListAuthMethods
useListAuthMethods();
  const { const removePasskey: any
removePasskey } = import useRemovePasskey
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 <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.