How can I change the Auth text on the sign-in button?

I'm using Auth from @supabase/auth-ui-react and would like to change the text from 'Sign in with Discord' to like 'Login'.
Thank you always.

import { useSupabaseClient } from '@supabase/auth-helpers-react'
import { Auth } from '@supabase/auth-ui-react'

export const LoginButton = () => {
  const supabase = useSupabaseClient()

  return (
    <>
      <Auth
        supabaseClient={supabase}
        providers={['discord']}
        onlyThirdPartyProviders={true}
      />
    </>
  )
}

import { useSupabaseClient } from '@supabase/auth-helpers-react'
import { Auth } from '@supabase/auth-ui-react'

export const LoginButton = () => {
  const supabase = useSupabaseClient()

  return (
    <>
      <Auth
        supabaseClient={supabase}
        providers={['discord']}
        onlyThirdPartyProviders={true}
      />
    </>
  )
}

import { useSupabaseClient } from '@supabase/auth-helpers-react'
import { Auth } from '@supabase/auth-ui-react'

export const LoginButton = () => {
  const supabase = useSupabaseClient()

  return (
    <>
      <Auth
        supabaseClient={supabase}
        providers={['discord']}
        onlyThirdPartyProviders={true}
      />
    </>
  )
}

import { useSupabaseClient } from '@supabase/auth-helpers-react'
import { Auth } from '@supabase/auth-ui-react'

export const LoginButton = () => {
  const supabase = useSupabaseClient()

  return (
    <>
      <Auth
        supabaseClient={supabase}
        providers={['discord']}
        onlyThirdPartyProviders={true}
      />
    </>
  )
}

silentworks•11/21/22, 11:25 PM

You won't be able to do this as the provider name will be in the label by default. So you could change it to Login with Discord, but not just Login.

silentworks•11/21/22, 11:29 PM

You would just pass the localizationlocalization prop to the Auth component

import { useSupabaseClient } from '@supabase/auth-helpers-react'
import { Auth } from '@supabase/auth-ui-react'

export const LoginButton = () => {
  const supabase = useSupabaseClient()

  return (
    <>
      <Auth
        supabaseClient={supabase}
        providers={['discord']}
        localization={{
            variables: {
              sign_in: {
                social_provider_text: 'Login with',
              },
            },
          }}
        onlyThirdPartyProviders={true}
      />
    </>
  )
}

import { useSupabaseClient } from '@supabase/auth-helpers-react'
import { Auth } from '@supabase/auth-ui-react'

export const LoginButton = () => {
  const supabase = useSupabaseClient()

  return (
    <>
      <Auth
        supabaseClient={supabase}
        providers={['discord']}
        localization={{
            variables: {
              sign_in: {
                social_provider_text: 'Login with',
              },
            },
          }}
        onlyThirdPartyProviders={true}
      />
    </>
  )
}

skagiyaOP•11/22/22, 6:19 AM

Thank you for telling me how to change the label. I hope one day I could change the provider name as well.

import { useSupabaseClient } from '@supabase/auth-helpers-react' import { Auth } from '@supabase/auth-ui-react' export const LoginButton = () => { const supabase = useSupabaseClient() return ( <> <Auth supabaseClient={supabase} providers={['discord']} localization={{ variables: { sign_in: { social_provider_text: 'Login with', }, }, }} onlyThirdPartyProviders={true} /> </> ) }

How can I change the Auth text on the sign-in button?

Similar Threads

Similar Threads

Similar Threads