<AuthenticateWithRedirectCallback />

import '@/styles/globals.css'
import { ClerkProvider, SignedIn, SignedOut, useSignIn } from '@clerk/nextjs'
import { AppProps } from 'next/app'
import { useRouter } from 'next/router'

const publicPages: Array<string> = []

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>
}
function MyApp({ Component, pageProps }: AppProps) {
  const { pathname } = useRouter()
  const isPublicPage = publicPages.includes(pathname)

  return (
    <ClerkProvider {...pageProps}>
      {isPublicPage ? (
        <Component {...pageProps} />
      ) : (
        <>
          <SignedIn>
            <Component {...pageProps} />
          </SignedIn>
          <SignedOut>
            <SignInOAuthButtons />
          </SignedOut>
        </>
      )}
    </ClerkProvider>
  )
}

export default MyApp

import { AuthenticateWithRedirectCallback } from '@clerk/nextjs'

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

import {
  ClerkProvider,
  AuthenticateWithRedirectCallback,
  SignedOut,
  useSignIn,
  SignedIn,
} from '@clerk/clerk-react'

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

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

        <Route path="/sso-callback" element={<AuthenticateWithRedirectCallback />} />
      </Routes>
    </ClerkProvider>
  )
}

function HomePages() {
  return (
    <>
      <SignedOut>
        <SignInOAuthButtons />
      </SignedOut>
      <SignedIn>
        <div>Hello! 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