Build a custom flow for displaying the last authentication method

Access the last authentication strategy

Warning

This guide is for users who want to build a custom user interface using the Clerk API. To use a prebuilt UI, use the Account Portal pages or prebuilt components.

The Client object includes a lastAuthenticationStrategy property that tracks the last authentication method used by the user. This is useful for improving the user experience by showing a "Last used" badge on OAuth buttons, helping returning users quickly identify their preferred sign-in method.

Access the last authentication strategy

The lastAuthenticationStrategy property is available on the object. You can access it through the client property of the instance.

Next.js

JavaScript

This example is written for Next.js App Router but it can be adapted for any React-based framework.

The following example demonstrates how to:

Access the client object using the useClerk() hook.
Check the lastAuthenticationStrategy property to identify which OAuth provider was last used.
Display a badge next to the corresponding OAuth button.

app/sign-in/page.tsx

'use client'

import * as React from 'react'
import { OAuthStrategy } from '@clerk/types'
import { useSignIn, useClerk } from '@clerk/nextjs'

export default function Page() {
  const { signIn } = useSignIn()
  const { client } = useClerk()

  if (!signIn) return null

  const lastStrategy = client?.lastAuthenticationStrategy

  const signInWith = (strategy: OAuthStrategy) => {
    return signIn.authenticateWithRedirect({
      strategy,
      redirectUrl: '/sign-in/sso-callback',
      redirectUrlComplete: '/',
    })
  }

  const providers = [
    { strategy: 'oauth_google' as const, name: 'Google' },
    { strategy: 'oauth_github' as const, name: 'GitHub' },
  ]

  return (
    <div>
      <h1>Sign in</h1>
      {providers.map((provider) => (
        <button key={provider.strategy} onClick={() => signInWith(provider.strategy)}>
          Sign in with {provider.name}
          {lastStrategy === provider.strategy && <span> (Last used)</span>}
        </button>
      ))}
    </div>
  )
}

The following example demonstrates how to:

Access the client object from the Clerk instance.
Check the lastAuthenticationStrategy property to identify which OAuth provider was last used.
Display a badge next to the corresponding OAuth button.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clerk + JavaScript App</title>
  </head>
  <body>
    <div id="app"></div>

    <script type="module" src="/src/main.js" async crossorigin="anonymous"></script>
  </body>
</html>

main.js

import { Clerk } from '@clerk/clerk-js'

const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(pubKey)
await clerk.load()

if (clerk.user) {
  // User is already signed in
  document.getElementById('app').innerHTML = `
    <div id="user-button"></div>
  `
  clerk.mountUserButton(document.getElementById('user-button'))
} else {
  const lastStrategy = clerk.client?.lastAuthenticationStrategy

  const providers = [
    { strategy: 'oauth_google', name: 'Google' },
    { strategy: 'oauth_github', name: 'GitHub' },
  ]

  const buttons = providers
    .map(
      (provider) => `
    <button id="${provider.strategy}">
      Sign in with ${provider.name}
      ${lastStrategy === provider.strategy ? '<span> (Last used)</span>' : ''}
    </button>
  `,
    )
    .join('')

  document.getElementById('app').innerHTML = `
    <h1>Sign in</h1>
    ${buttons}
  `

  providers.forEach((provider) => {
    document.getElementById(provider.strategy)?.addEventListener('click', async () => {
      try {
        await clerk.client.signIn.authenticateWithRedirect({
          strategy: provider.strategy,
          redirectUrl: '/sso-callback',
          redirectUrlComplete: '/',
        })
      } catch (error) {
        console.error('Error:', error)
      }
    })
  })
}

Edit on GitHub

Last updated on Oct 24, 2025

Build a custom flow for displaying the last authentication method

Access the last authentication strategy

Feedback