Distinguishing Between Login Methods

Recommended: JavaScript SDK with React Hooks

For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.

Introduction

When a user authenticates with Dynamic, they may use various methods such as email, social login, passkey, or connecting a wallet. Understanding which method they used - and which one was used most recently - is essential for building personalized experiences and implementing proper session management.

This guide shows you how to:

1. Find the user’s last used login method
2. Check all available verified credentials
3. Determine the type and provider of each credential

Finding the Last Used Login Method

Every user has a lastVerifiedCredentialId property that points to the credential they most recently used to authenticate. You can use this ID to look up the credential in the verifiedCredentials array.

React

import { useDynamicContext } from '@dynamic-labs/sdk-react-core';

const MyComponent = () => {
  const { user } = useDynamicContext();

  // Get the last verified credential ID
  const lastCredentialId = user?.lastVerifiedCredentialId;

  // Find the credential in the verifiedCredentials array
  const lastCredential = user?.verifiedCredentials?.find(
    (vc) => vc.id === lastCredentialId
  );

  if (!lastCredential) {
    return <div>No verified credentials found</div>;
  }

  // Check the credential type (format)
  console.log('Credential format:', lastCredential.format);
  // Possible values: 'blockchain', 'email', 'externalUser', 'oauth', 'passkey', 'phoneNumber', 'totp'

  // For wallet credentials, check the provider
  if (lastCredential.format === 'blockchain') {
    console.log('Wallet provider:', lastCredential.walletProvider);
    // Possible values: 'browserExtension', 'embeddedWallet', 'walletConnect', 
    // 'qrCode', 'deepLink', 'custodialService', 'smartContractWallet'
  }

  // For OAuth credentials, check the provider
  if (lastCredential.format === 'oauth') {
    console.log('OAuth provider:', lastCredential.oauthProvider);
    // Possible values: 'google', 'apple', 'discord', 'twitter', etc.
  }

  return (
    <div>
      <p>Last login method: {lastCredential.format}</p>
      <p>Public identifier: {lastCredential.publicIdentifier}</p>
    </div>
  );
};

Credential Types (Format)

The format field on a verified credential indicates what type of authentication method was used:

Format	Description
blockchain	User authenticated by signing a message with a blockchain wallet
email	User authenticated via email (OTP or magic link)
oauth	User authenticated via a social provider (Google, Apple, Discord, etc.)
passkey	User authenticated using a passkey (WebAuthn)

Wallet Provider Types

When a credential has a format of blockchain, the walletProvider field indicates what type of wallet was used:

Wallet Provider	Description
browserExtension	Browser extension wallet (MetaMask, Coinbase Wallet extension, etc.)
embeddedWallet	Dynamic’s embedded wallet
walletConnect	Wallet connected via WalletConnect protocol
qrCode	Wallet connected by scanning a QR code
deepLink	Wallet connected via deep link (mobile)
custodialService	Custodial wallet service
smartContractWallet	Smart contract wallet (account abstraction)

OAuth Provider Types

When a credential has a format of oauth, the oauthProvider field indicates which social provider was used:

OAuth Provider	Description
google	Google account
apple	Apple ID
discord	Discord account
twitter	Twitter/X account
github	GitHub account
facebook	Facebook account
twitch	Twitch account
linkedin	LinkedIn account
microsoft	Microsoft account
farcaster	Farcaster account
telegram	Telegram account

See the full list of supported social providers in Social Providers.

Iterating Through All Credentials

You can also iterate through all of a user’s verified credentials to understand their full authentication history:

React

import { useDynamicContext } from '@dynamic-labs/sdk-react-core';

const AllCredentials = () => {
  const { user } = useDynamicContext();

  return (
    <div>
      <h3>All Verified Credentials</h3>
      {user?.verifiedCredentials?.map((vc) => (
        <div key={vc.id}>
          <p>Format: {vc.format}</p>
          <p>Identifier: {vc.publicIdentifier}</p>
          {vc.format === 'blockchain' && (
            <p>Wallet Provider: {vc.walletProvider}</p>
          )}
          {vc.format === 'oauth' && (
            <p>OAuth Provider: {vc.oauthProvider}</p>
          )}
          {vc.id === user.lastVerifiedCredentialId && (
            <span>(Last used)</span>
          )}
          <hr />
        </div>
      ))}
    </div>
  );
};

Determining Login Method Type with Helper Functions

Here’s a helper function pattern you can use to easily determine the login method type:

React

import { useDynamicContext } from '@dynamic-labs/sdk-react-core';

type LoginMethod = 
  | 'email'
  | 'social'
  | 'passkey'
  | 'browser-wallet'
  | 'embedded-wallet'
  | 'wallet-connect'
  | 'unknown';

const useLastLoginMethod = (): LoginMethod => {
  const { user } = useDynamicContext();

  const lastCredentialId = user?.lastVerifiedCredentialId;
  const lastCredential = user?.verifiedCredentials?.find(
    (vc) => vc.id === lastCredentialId
  );

  if (!lastCredential) return 'unknown';

  switch (lastCredential.format) {
    case 'email':
      return 'email';
    case 'passkey':
      return 'passkey';
    case 'oauth':
      return 'social';
    case 'blockchain':
      if (lastCredential.walletProvider === 'embeddedWallet') {
        return 'embedded-wallet';
      }
      if (lastCredential.walletProvider === 'browserExtension') {
        return 'browser-wallet';
      }
      if (lastCredential.walletProvider === 'walletConnect') {
        return 'wallet-connect';
      }
      return 'browser-wallet';
    default:
      return 'unknown';
  }
};

// Usage
const MyComponent = () => {
  const loginMethod = useLastLoginMethod();

  return <div>You logged in via: {loginMethod}</div>;
};

Related Resources

Verified Credentials

Learn more about the verified credential structure and all available fields

Accessing Users

Different ways to access user information in your application