<AuthenticateWithRedirectCallback />

The <AuthenticateWithRedirectCallback /> component is a crucial part of implementing custom OAuth flows in your application. It serves as the callback handler for the authentication process initiated by the authenticateWithRedirect() method. Render it on the route specified as the redirectUrl in your authenticateWithRedirect() call.

This component automatically handles the OAuth callback, completing the authentication process and managing the user's session.

Properties

---

signInUrl? string

Full URL or path where the SignIn component is mounted.

---

signUpUrl? string

Full URL or path where the SignUp component is mounted.

---

signInFallbackRedirectUrl? string

The fallback URL to redirect to after the user signs in, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

---

signUpFallbackRedirectUrl? string

The fallback URL to redirect to after the user signs up, if there's no redirect_url in the path already. Defaults to /. It's recommended to use the environment variable instead.

---

signInForceRedirectUrl? string

If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.

---

signUpForceRedirectUrl? string

If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.

---

firstFactorUrl string | undefined

Full URL or path to navigate during sign in, if identifier verification is required.

---

secondFactorUrl string | undefined

Full URL or path to navigate during sign in, if 2FA is enabled.

---

resetPasswordUrl string

Full URL or path to navigate during sign in, if the user is required to reset their password.

---

continueSignUpUrl string | undefined | null

Full URL or path to navigate after an incomplete sign up.

---

verifyEmailAddressUrl string | undefined | null

Full URL or path to navigate after requesting email verification.

---

verifyPhoneNumberUrl string | undefined | null

Full URL or path to navigate after requesting phone verification.

---

afterSignInUrl (deprecated) string

Full URL or path to navigate to after successful sign in. Defaults to /. It's recommended to use the environment variable instead. signInFallbackRedirectUrl and signInforceRedirectUrl have priority and should be used instead.

---

afterSignUpUrl (deprecated) string

Full URL or path to navigate to after successful sign up. Defaults to /. It's recommended to use the environment variable instead. signUpFallbackRedirectUrl and signUpforceRedirectUrl have priority and should be used instead.

---

redirectUrl (deprecated) string

Full URL or path to navigate after successful sign in or sign up. This is the same as setting afterSignInUrl and afterSignUpUrl to the same value. The signXfallbackRedirectUrl and signXforceRedirectUrl props have priority over the deprecated redirectUrl and should be used instead.

Usage

In the following example, when a user selects the "Sign in with Google" button, they are redirected to Google for authentication. After successful authentication, Google redirects the user back to your application at the /sso-callback route, where the <AuthenticateWithRedirectCallback /> component is automatically rendered. This component handles the OAuth callback, completes the authentication process, and manages the user's session.

Next.js

app/layout.tsx

'use client'

import { OneAuxiliaProvider, SignedIn, SignedOut, UserButton, useSignIn } from '@oneauxilia/nextjs'

const SignInOAuthButtons = () => {
  const { signIn, isLoaded } = useSignIn()

  if (!isLoaded) {
    return null
  }

  const signInWithGoogle = () =>
    signIn.authenticateWithRedirect({
      strategy: 'oauth_google',
      redirectUrl: '/sso-callback',
      redirectUrlComplete: '/',
    })

  return <button onClick={signInWithGoogle}>Sign in with Google</button>
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <OneAuxiliaProvider>
      <html lang="en">
        <body>
          <header>
            <SignedOut>
              <SignInOAuthButtons />
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </header>
          <main>{children}</main>
        </body>
      </html>
    </OneAuxiliaProvider>
  )
}

Once you have implemented your sign-in flow, you can implement the callback page.

app/sso-callback/page.tsx

import { AuthenticateWithRedirectCallback } from '@oneauxilia/nextjs'

export default function Page() {
  return <AuthenticateWithRedirectCallback />
}

React

The following example is using the react-router-dom library, but you can use any routing library you want.

app.tsx

import {
  OneAuxiliaProvider,
  AuthenticateWithRedirectCallback,
  SignedOut,
  useSignIn,
  SignedIn,
} from '@oneauxilia/oneauxilia-react'

import { Route, Routes } from 'react-router-dom'

function App() {
  return (
    <OneAuxiliaProvider publishableKey={'YOUR_PUBLISHABLE_KEY'}>
      {/* Define a / route that displays the OAuth button */}
      <Routes>
        <Route path="/" element={<HomePages />} />

        {/* Define a /sso-callback route that renders the <AuthenticateWithRedirectCallback /> component */}
        <Route path="/sso-callback" element={<AuthenticateWithRedirectCallback />} />
      </Routes>
    </OneAuxiliaProvider>
  )
}

function HomePages() {
  return (
    <>
      <SignedOut>
        <SignInOAuthButtons />
      </SignedOut>
      <SignedIn>
        <div>You are signed in</div>
      </SignedIn>
    </>
  )
}

function SignInOAuthButtons() {
  const { signIn, isLoaded } = useSignIn()
  if (!isLoaded) {
    return null
  }
  const signInWithGoogle = () =>
    signIn.authenticateWithRedirect({
      strategy: 'oauth_google',
      redirectUrl: '/sso-callback',
      redirectUrlComplete: '/',
    })
  return <button onClick={signInWithGoogle}>Sign in with Google</button>
}

export default App