<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;