fix: google login redirect

2024-04-20 13:53:18 +06:00 · 2024-04-20 13:53:18 +06:00 · 8a6a99a81b
parent d26c214047
commit 8a6a99a81b
13 changed files with 412 additions and 88 deletions
--- a/.env
+++ b/.env
@ -1,20 +0,0 @@
-DATABASE_URL=mongodb+srv://freshbitemehedi:freshbitemehedi2810@project1.lispgny.mongodb.net/Skilld
-
-UPLOADTHING_SECRET=sk_live_938397c2e99554ab0bc541ba01114334d2ed523a0dbb9988870bcfc05d6ad9df
-UPLOADTHING_APP_ID=h07pj3xjyv
-
-NEXTAUTH_URL=http://localhost:3000
-NEXTAUTH_SECRET=2aqrEwXp57xY5dA6WN5akp3ceFDVg64Qu0Ufm/Dew8g=
-
-# Go to github and setup the oauth configuration
-# https://next-auth.js.org/providers/github#configuration
-# https://github.com/settings/developers
-
-GITHUB_ID=674c632636000fe44d40
-GITHUB_SECRET=0ec0b70e902ae00021514e21427108275ef4244b
-
-
-NEXT_PUBLIC_SUPABASE_URL=https://ckngsmtjumbnwksjutdo.supabase.co
-NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNrbmdzbXRqdW1ibndrc2p1dGRvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTAzNDIwNjMsImV4cCI6MjAyNTkxODA2M30.ZkykkQeBh8-Ej8_2KMdFPNelEF6jzAgb1Nqd64vwAvs
-
-NEXT_PUBLIC_SITE_URL=http://localhost:3000
--- a/src/app/(auth)/(signup)/page.tsx
+++ b/src/app/(auth)/(signup)/page.tsx
@ -1,29 +1,49 @@
 import { Metadata } from "next";
 import Link from "next/link";
-import UserAuthForm from "@/components/forms/user-auth-form";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import Image from "next/image";
+import SignUpForm from "@/components/forms/signup-form";

 export const metadata: Metadata = {
-  title: "Sign In | Skilld",
-  description: "Sign In to start your journey with Skilld.",
+  title: "Sign Up | Skilld",
+  description: "Sign Up to start your journey with Skilld.",
 };

 export default function AuthenticationPage() {
  return (
    <div className="relative h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
      <Link
-        href="/examples/authentication"
+        href="/signin"
        className={cn(
          buttonVariants({ variant: "ghost" }),
-          "absolute right-4 hidden top-4 md:right-8 md:top-8",
+          "absolute right-4 top-4 md:right-8 md:top-8 hidden",
        )}
      >
-        Login
+        Sign In
      </Link>
      <div className="relative hidden h-full flex-col bg-secondary p-10 dark:border-r lg:flex">
        <div className="absolute inset-0 bg-secondary" />
-        <div className="relative z-20 flex items-center text-lg font-medium">
+        <Link
+          href="/dashboard"
+          className="relative z-20 flex items-center text-lg font-medium"
+        >
+          <Image
+            src="/Skilld AI Logos/Skilld Logo-colour on black.png"
+            alt="Skilld Logo"
+            width={100}
+            height={30}
+            className="hidden dark:block h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
+          />
+          <Image
+            src="/Skilld AI Logos/Skilld Logo-colour.png"
+            alt="Skilld Logo"
+            width={100}
+            height={30}
+            className="dark:hidden h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
+          />
+        </Link>
+        {/* <div className="relative z-20 flex items-center text-lg font-medium">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
@ -37,7 +57,7 @@ export default function AuthenticationPage() {
            <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
          </svg>
          Skilld
-        </div>
+        </div> */}
        <div className="relative z-20 mt-auto">
          <blockquote className="space-y-2">
            <p className="text-lg text-muted-foreground">
@ -57,28 +77,36 @@ export default function AuthenticationPage() {
            <h1 className="text-2xl font-semibold tracking-tight">
              Create an account
            </h1>
-            <p className="text-sm text-muted-foreground">
-              Enter your email below to create your account
+            {/* <p className="text-sm text-muted-foreground">
+              Enter your email and password below to create your account
+            </p> */}
+          </div>
+          <SignUpForm />
+          <div>
+            <p className="text-center text-sm text-muted-foreground">
+              Already have an account?{" "}
+              <Link href="/signin" className="underline hover:text-primary">
+                Sign In
+              </Link>
+            </p>
+            <p className="mt-2 text-center text-sm text-muted-foreground">
+              By clicking continue, you agree to our{" "}
+              <Link
+                href="/terms"
+                className="underline underline-offset-4 hover:text-primary"
+              >
+                Terms of Service
+              </Link>{" "}
+              and{" "}
+              <Link
+                href="/privacy"
+                className="underline underline-offset-4 hover:text-primary"
+              >
+                Privacy Policy
+              </Link>
+              .
            </p>
          </div>
-          <UserAuthForm />
-          <p className="px-8 text-center text-sm text-muted-foreground">
-            By clicking continue, you agree to our{" "}
-            <Link
-              href="/terms"
-              className="underline underline-offset-4 hover:text-primary"
-            >
-              Terms of Service
-            </Link>{" "}
-            and{" "}
-            <Link
-              href="/privacy"
-              className="underline underline-offset-4 hover:text-primary"
-            >
-              Privacy Policy
-            </Link>
-            .
-          </p>
        </div>
      </div>
    </div>
--- a/src/app/(auth)/signin/page.tsx
+++ b/src/app/(auth)/signin/page.tsx
@ -0,0 +1,114 @@
+import { Metadata } from "next";
+import Link from "next/link";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import SignInForm from "@/components/forms/signin-form";
+
+export const metadata: Metadata = {
+  title: "Sign In | Skilld",
+  description: "Sign In to restart your journey with Skilld.",
+};
+
+export default function AuthenticationPage() {
+  return (
+    <div className="relative h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
+      <Link
+        href="/"
+        className={cn(
+          buttonVariants({ variant: "ghost" }),
+          "absolute right-4 top-4 md:right-8 md:top-8 hidden",
+        )}
+      >
+        Sign Up
+      </Link>
+      <div className="relative hidden h-full flex-col bg-secondary p-10 dark:border-r lg:flex">
+        <div className="absolute inset-0 bg-secondary" />
+        <Link
+          href="/dashboard"
+          className="relative z-20 flex items-center text-lg font-medium"
+        >
+          <Image
+            src="/Skilld AI Logos/Skilld Logo-colour on black.png"
+            alt="Skilld Logo"
+            width={100}
+            height={30}
+            className="hidden dark:block h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
+          />
+          <Image
+            src="/Skilld AI Logos/Skilld Logo-colour.png"
+            alt="Skilld Logo"
+            width={100}
+            height={30}
+            className="dark:hidden h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
+          />
+        </Link>
+        {/* <div className="relative z-20 flex items-center text-lg font-medium">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="mr-2 h-6 w-6"
+          >
+            <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+          </svg>
+          Skilld
+        </div> */}
+        <div className="relative z-20 mt-auto">
+          <blockquote className="space-y-2">
+            <p className="text-lg text-muted-foreground">
+              &ldquo;Empower your coding journey at Skilld. Access tutorials,
+              challenges, and expert-led courses to master programming languages
+              and tools. Join a supportive community for discussions and code
+              reviews. Elevate your skills and stay ahead in the tech world with
+              us!.&rdquo;
+            </p>
+            {/* <footer className="text-sm">Ak</footer> */}
+          </blockquote>
+        </div>
+      </div>
+      <div className="p-4 lg:p-8 h-full flex items-center">
+        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+          <div className="flex flex-col space-y-2 text-center">
+            <h1 className="text-2xl font-semibold tracking-tight">
+              Sign In To Your Account
+            </h1>
+            {/* <p className="text-sm text-muted-foreground">
+              Enter your email and password below to create your account
+            </p> */}
+          </div>
+          <SignInForm />
+          <div>
+            <p className="text-center text-sm text-muted-foreground">
+              Don&#39;t have an account?{" "}
+              <Link href="/" className="underline hover:text-primary">
+                Sign Up
+              </Link>
+            </p>
+            {/* <p className="mt-2 text-center text-sm text-muted-foreground">
+              By clicking continue, you agree to our{" "}
+              <Link
+                href="/terms"
+                className="underline underline-offset-4 hover:text-primary"
+              >
+                Terms of Service
+              </Link>{" "}
+              and{" "}
+              <Link
+                href="/privacy"
+                className="underline underline-offset-4 hover:text-primary"
+              >
+                Privacy Policy
+              </Link>
+              .
+            </p> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/app/(dashboard)/dashboard/(quiz)/layout.tsx
+++ b/src/app/(dashboard)/dashboard/(quiz)/layout.tsx
@ -1,7 +1,9 @@
 import Header from "@/components/layout/header";
 import Sidebar from "@/components/layout/sidebar";
 import StoreProvider from "@/lib/store-provider";
+import { createClient } from "@/utils/supabase/server";
 import type { Metadata } from "next";
+import { redirect } from "next/navigation";

 export const metadata: Metadata = {
  title: "Dashboard | Skilld",
@ -9,11 +11,22 @@ export const metadata: Metadata = {
    "Empower your coding journey at Skilld. Access tutorials, challenges, and expert-led courses to master programming languages and tools. Join a supportive community for discussions and code reviews. Elevate your skills and stay ahead in the tech world with us!",
 };

-export default function DashboardLayout({
+export default async function DashboardLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
+
+  const supabase = createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return redirect("/signin");
+  }
+
  return (
    <>
      <StoreProvider lastUpdate={new Date().getTime()}>
--- a/src/app/(dashboard)/dashboard/(task)/layout.tsx
+++ b/src/app/(dashboard)/dashboard/(task)/layout.tsx
@ -1,13 +1,25 @@
 import { Metadata } from "next";
 import React from "react";
 import Header from "@/components/task/header";
+import { createClient } from "@/utils/supabase/server";
+import { redirect } from "next/navigation";

 export const metadata: Metadata = {
  title: "Task | Skilld",
  description: "Skilld",
 };

-const Layout = ({ children }: { children: React.ReactNode }) => {
+const Layout = async ({ children }: { children: React.ReactNode }) => {
+  const supabase = createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return redirect("/signin");
+  }
+
  return (
    <div className="grid grid-rows-[53px_1fr] min-h-screen">
      <Header />
--- a/src/components/forms/signin-form.tsx
+++ b/src/components/forms/signin-form.tsx
@ -0,0 +1,136 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import GoogleSignInButton from "../google-auth-button";
+import { createClient } from "@/utils/supabase/client";
+import { useToast } from "../ui/use-toast";
+
+const formSchema = z.object({
+  email: z.string().email({ message: "Enter a valid email address" }),
+  password: z
+    .string()
+    .min(6, { message: "Password should be minimum 6 characters" }),
+});
+
+type UserFormValue = z.infer<typeof formSchema>;
+
+export default function SignInForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get("callbackUrl");
+  const [loading, setLoading] = useState(false);
+  const { toast } = useToast();
+  // const defaultValues = {
+  //   email: "demo@gmail.com",
+  // };
+  const form = useForm<UserFormValue>({
+    resolver: zodResolver(formSchema),
+    // defaultValues,
+  });
+
+  const onSubmit = async ({ email, password }: UserFormValue) => {
+    console.log(email, password);
+    const supabase = createClient();
+
+    setLoading(true);
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+      // options: {
+      //   emailRedirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback`,
+      // },
+    });
+    console.log(data);
+    console.log(error);
+    // signIn("credentials", {
+    //   email: data.email,
+    //   callbackUrl: callbackUrl ?? "/dashboard",
+    // });
+
+    setLoading(false);
+
+    if (error) {
+      toast({ variant: "destructive", title: error.message });
+
+      return;
+    }
+
+    router.push("/dashboard");
+  };
+
+  return (
+    <>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-2 w-full"
+        >
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder="Enter your email..."
+                    disabled={loading}
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input
+                    type="password"
+                    placeholder="Enter your password..."
+                    disabled={loading}
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Button disabled={loading} className="ml-auto w-full" type="submit">
+            {loading ? "Signing In..." : "Sign In"}
+          </Button>
+        </form>
+      </Form>
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-background px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+      <GoogleSignInButton />
+    </>
+  );
+}
--- a/src/components/forms/user-auth-form.tsx
+++ b/src/components/forms/user-auth-form.tsx
@ -16,6 +16,7 @@ import { useForm } from "react-hook-form";
 import * as z from "zod";
 import GoogleSignInButton from "../google-auth-button";
 import { createClient } from "@/utils/supabase/client";
+import { useToast } from "../ui/use-toast";

 const formSchema = z.object({
  email: z.string().email({ message: "Enter a valid email address" }),
@ -26,11 +27,14 @@ const formSchema = z.object({

 type UserFormValue = z.infer<typeof formSchema>;

-export default function UserAuthForm() {
+export default function SignUpForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get("callbackUrl");
  const [loading, setLoading] = useState(false);
+
+  const { toast } = useToast();
+
  // const defaultValues = {
  //   email: "demo@gmail.com",
  // };
@ -42,6 +46,8 @@ export default function UserAuthForm() {
  const onSubmit = async ({ email, password }: UserFormValue) => {
    console.log(email, password);
    const supabase = createClient();
+
+    setLoading(true);
    const { data, error } = await supabase.auth.signUp({
      email,
      password,
@ -56,9 +62,15 @@ export default function UserAuthForm() {
    //   callbackUrl: callbackUrl ?? "/dashboard",
    // });

-    if (!error) {
-      router.push("/dashboard");
+    setLoading(false);
+
+    if (error) {
+      toast({ variant: "destructive", title: error.message });
+
+      return;
    }
+
+    router.push("/dashboard");
  };

  return (
@ -106,7 +118,7 @@ export default function UserAuthForm() {
          />

          <Button disabled={loading} className="ml-auto w-full" type="submit">
-            Continue With Email
+            {loading ? "Signing Up..." : "Sign Up"}
          </Button>
        </form>
      </Form>
--- a/src/components/google-auth-button.tsx
+++ b/src/components/google-auth-button.tsx
@ -17,6 +17,8 @@ export default function GoogleSignInButton() {
        redirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback`,
      },
    });
+
+    console.log(error);
  };

  return (
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@ -30,6 +30,8 @@ import {
  User2Icon,
  UserX2Icon,
  X,
+  Upload,
+  BookCheck,
 } from "lucide-react";

 export type Icon = LucideIcon;
@ -61,7 +63,9 @@ export const Icons = {
  sun: SunMedium,
  moon: Moon,
  laptop: Laptop,
+  upload: Upload,
  shieldQuestion: ShieldQuestion,
+  bookCheck: BookCheck,
  gitHub: ({ ...props }: LucideProps) => (
    <svg
      aria-hidden="true"
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@ -4,35 +4,51 @@ import { MobileSidebar } from "./mobile-sidebar";
 import { UserNav } from "./user-nav";
 import Link from "next/link";
 import Image from "next/image";
+import { createClient } from "@/utils/supabase/server";
+import { redirect } from "next/navigation";
+
+export default async function Header() {
+  const supabase = createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return redirect("/signin");
+  }
+

-export default function Header() {
  return (
    <div className="fixed top-0 left-0 right-0 supports-backdrop-blur:bg-background/60 border-b bg-background/95 backdrop-blur z-20">
      <nav className="h-14 flex items-center justify-between px-4">
        <div className="hidden lg:block">
          <Link href="/dashboard" className="inline-block w-fit">
-          <Image
-            src="/Skilld AI Logos/Skilld Logo-colour on black.png"
-            alt="Skilld Logo"
-            width={100}
-            height={30}
-            className="hidden dark:block h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
-          />
-          <Image
-            src="/Skilld AI Logos/Skilld Logo-colour.png"
-            alt="Skilld Logo"
-            width={100}
-            height={30}
-            className="dark:hidden h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
-          />
-        </Link>
+            <Image
+              src="/Skilld AI Logos/Skilld Logo-colour on black.png"
+              alt="Skilld Logo"
+              width={100}
+              height={30}
+              className="hidden dark:block h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
+            />
+            <Image
+              src="/Skilld AI Logos/Skilld Logo-colour.png"
+              alt="Skilld Logo"
+              width={100}
+              height={30}
+              className="dark:hidden h-[25px] w-[80px] md:w-[100px] md:h-[30px] object-contain"
+            />
+          </Link>
        </div>
        <div className={cn("block lg:!hidden")}>
          <MobileSidebar />
        </div>

-        <div className="flex items-center gap-2">
-          <UserNav />
+        <div className="flex items-center gap-4">
+          <UserNav
+            email={user?.email || "example@gmail.com"}
+            avatarUrl={user?.user_metadata?.avatar_url || ""}
+          />
          <ThemeToggle />
        </div>
      </nav>
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@ -10,9 +10,9 @@ export default function Sidebar() {
      <div className="space-y-4 py-4">
        <div className="px-3 py-2">
          <div className="space-y-1">
-            <h2 className="mb-2 px-4 text-xl font-semibold tracking-tight">
+            {/* <h2 className="mb-2 px-4 text-xl font-semibold tracking-tight">
              Overview
-            </h2>
+            </h2> */}
            <DashboardNav items={navItems} />
          </div>
        </div>
--- a/src/components/layout/user-nav.tsx
+++ b/src/components/layout/user-nav.tsx
@ -12,15 +12,22 @@ import {
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { createClient } from "@/utils/supabase/client";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
-export function UserNav() {
+export function UserNav({
+  email,
+  avatarUrl,
+}: {
+  email: string;
+  avatarUrl: string;
+}) {
  const router = useRouter();
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
          <Avatar className="h-8 w-8">
-            <AvatarImage src={""} alt={""} />
+            <AvatarImage src={avatarUrl} alt={"User avatar"} />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
        </Button>
@ -30,29 +37,29 @@ export function UserNav() {
          <div className="flex flex-col space-y-1">
            <p className="text-sm font-medium leading-none">John Doe</p>
            <p className="text-xs leading-none text-muted-foreground">
-              john@doe.com
+              {email}
            </p>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
-            Profile
+            <Link href="/dashboard/profile">Profile</Link>
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
-          <DropdownMenuItem>
+          {/* <DropdownMenuItem>
            Billing
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
+          </DropdownMenuItem> */}
+          {/* <DropdownMenuItem>
            Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>New Team</DropdownMenuItem>
+          </DropdownMenuItem> */}
+          {/* <DropdownMenuItem>New Team</DropdownMenuItem> */}
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
-        <DropdownMenuItem 
-         className="cursor-pointer"
+        <DropdownMenuItem
+          className="cursor-pointer"
          onClick={async () => {
            const supabase = createClient();
            const { error } = await supabase.auth.signOut();
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@ -23,9 +23,9 @@ export const HEADING_LINK_ANCHOR = `before:content-['#'] before:absolute before:

 export const navItems: NavItem[] = [
  {
-    title: "Dashboard",
+    title: "Upload CV",
    href: "/dashboard",
-    icon: "dashboard",
+    icon: "upload",
    label: "Dashboard",
  },
  {
@ -37,7 +37,7 @@ export const navItems: NavItem[] = [
  {
    title: "Your Task",
    href: "/dashboard/task/react/1",
-    icon: "shieldQuestion",
+    icon: "bookCheck",
    label: "Your Task",
  },