1
import React from "react";
2
import {
3
  ClerkProvider,
4
  AuthenticateWithRedirectCallback,
5
  UserButton,
6
  SignedOut,
7
  useSignIn,
8
} from "@clerk/clerk-react";
9

10
const frontendApi = process.env.REACT_APP_CLERK_FRONTEND_API;
11

12
function App() {
13
  return (
14
    //  react-router-dom requires your app to be wrapped with a Router
15
    <BrowserRouter>
16
      <ClerkProvider frontendApi={frontendApi}>
17
        <Switch>
18
          {/* Define a / route that displays the OAuth button */}
19
          <Route path="/">
20
            <SignedOut>
21
              <SignInOAuthButtons />
22
            </SignedOut>
23
          </Route>
24
         
25
           {/* Define a /sso-callback route that handle the OAuth redirect flow */}
26
          <Route path="/sso-callback">
27
            {/* Simply render the component */}
28
            <AuthenticateWithRedirectCallback />
29
          </Route>
30
        </Switch>
31
      </ClerkProvider>
32
    </BrowserRouter>
33
  );
34
}
35

36
function SignInOAuthButtons() {
37
  const { signIn } = useSignIn();
38
  const signInWithGoogle = () =>
39
    signIn.authenticateWithRedirect({
40
      strategy: "oauth_google",
41
      redirectUrl: "/sso-callback",
42
      redirectUrlComplete: "/",
43
    });
44
  return <button onClick={signInWithGoogle}>Sign in with Google</button>;
45
}