Update auth flow

mxsaad · Jan 31, 2024 · 5d20fd0 · 5d20fd0
1 parent e8e674a
commit 5d20fd0
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/components/shared/header.tsx b/components/shared/header.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link"
 import { ModeToggle } from "@/components/ui/mode-toggle"
 import { Button } from "@/components/ui/button"
-import { SignUpButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs"
+import { SignUpButton, SignedIn, SignedOut } from "@clerk/nextjs"
 import Image from "next/image"
 import UserDropdown from "@/components/shared/user-dropdown"
 
@@ -18,9 +18,9 @@ const Header = () => {
           <UserDropdown />
         </SignedIn>
         <SignedOut>
-          <SignUpButton>
+          <Link href="/auth">
             <Button>Sign In</Button>
-          </SignUpButton>
+          </Link>
         </SignedOut>
       </div>
     </header>

diff --git a/components/shared/sign-in-form.tsx b/components/shared/sign-in-form.tsx
@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/form"
 import { useToast } from "../ui/use-toast"
 import { useSignIn } from "@clerk/nextjs";
+import { useRouter } from "next/navigation";
 
 // Form Schema
 const formSchema = z.object({
@@ -25,6 +26,7 @@ const formSchema = z.object({
 export default function SignUpForm() {
   const { isLoaded, signIn, setActive } = useSignIn();
   const { toast } = useToast();
+  const router = useRouter();
 
   // Form Definition
   const form = useForm<z.infer<typeof formSchema>>({
@@ -42,9 +44,11 @@ export default function SignUpForm() {
     const { identifier, password } = values;
     await signIn
       .create({ identifier, password })
-      .then((result) => {
-        if (result.status === "complete")
-          setActive({ session: result.createdSessionId });
+      .then(async (result) => {
+        if (result.status === "complete") {
+          await setActive({ session: result.createdSessionId })
+          router.replace("/profile");
+        }
       })
       .catch((err) => {
         toast({

diff --git a/components/shared/sign-up-form.tsx b/components/shared/sign-up-form.tsx
@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/form"
 import { useToast } from "../ui/use-toast"
 import { useSignUp } from "@clerk/nextjs";
+import { useRouter } from "next/navigation";
 
 // Form Schema
 const formSchema: z.Schema = z.object({
@@ -35,6 +36,7 @@ const formSchema: z.Schema = z.object({
 export default function SignUpForm() {
   const { isLoaded, signUp, setActive } = useSignUp();
   const { toast } = useToast();
+  const router = useRouter();
 
   // Form Definition
   const form = useForm<z.infer<typeof formSchema>>({
@@ -54,9 +56,11 @@ export default function SignUpForm() {
     const { username, emailAddress, password } = values;
     await signUp
       .create({ username, emailAddress, password })
-      .then((result) => {
-        if (result.status === "complete")
-          setActive({ session: result.createdSessionId });
+      .then(async (result) => {
+        if (result.status === "complete") {
+          await setActive({ session: result.createdSessionId });
+          router.replace("/profile");
+        }
       })
       .catch((err) => {
         toast({