feat(create-turbo): create https://github.com/juliusmarminge/acme-corp

apps/nextjs/src/app/(auth)/signin/oauth-signin.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import * as React from "react";
+import { useSignIn } from "@clerk/nextjs";
+import type { OAuthStrategy } from "@clerk/types";
+
+import { Button } from "@acme/ui/button";
+import * as Icons from "@acme/ui/icons";
+import { useToast } from "@acme/ui/use-toast";
+
+export function OAuthSignIn() {
+  const [isLoading, setIsLoading] = React.useState<OAuthStrategy | null>(null);
+  const { signIn, isLoaded: signInLoaded } = useSignIn();
+  const { toast } = useToast();
+
+  const oauthSignIn = async (provider: OAuthStrategy) => {
+    if (!signInLoaded) return null;
+    try {
+      setIsLoading(provider);
+      await signIn.authenticateWithRedirect({
+        strategy: provider,
+        redirectUrl: "/sso-callback",
+        redirectUrlComplete: "/dashboard",
+      });
+    } catch (cause) {
+      console.error(cause);
+      setIsLoading(null);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Something went wrong, please try again.",
+      });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Button
+        variant="outline"
+        className="bg-background"
+        onClick={() => oauthSignIn("oauth_github")}
+      >
+        {isLoading === "oauth_github" ? (
+          <Icons.Spinner className="mr-2 h-4 w-4 animate-spin" />
+        ) : (
+          <Icons.GitHub className="mr-2 h-4 w-4" />
+        )}
+        Github
+      </Button>
+      <Button
+        variant="outline"
+        className="bg-background"
+        onClick={() => oauthSignIn("oauth_google")}
+      >
+        {isLoading === "oauth_google" ? (
+          <Icons.Spinner className="mr-2 h-4 w-4 animate-spin" />
+        ) : (
+          <Icons.Google className="mr-2 h-4 w-4" />
+        )}
+        Google
+      </Button>
+    </div>
+  );
+}