Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mobile and desktop menu authentication display - team_bulldozer #793

Closed
wants to merge 11 commits into from
Closed

mobile and desktop menu authentication display - team_bulldozer #793

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
51151bc
fix: auth.config redirect url
harjibbolar26 Jul 30, 2024
f9e1a86
Merge branch 'dev' into bulldozer/authentication
harjibbolar26 Jul 30, 2024
d1372a4
Merge remote-tracking branch 'upstream/dev' into bulldozer/authentica…
harjibbolar26 Jul 30, 2024
64a8730
fix: navbar popfile iamge
harjibbolar26 Jul 30, 2024
b7e14d8
fix: eslint error
harjibbolar26 Jul 30, 2024
af1e005
Merge branch 'bulldozer/authentication' of https://github.com/harjibb…
harjibbolar26 Jul 30, 2024
b30c3bc
fix: mobile responsiveness for authenticated user with profile iamge
harjibbolar26 Jul 30, 2024
4475a08
Merge branch 'dev' into bulldozer/authentication
harjibbolar26 Jul 30, 2024
dbb5bd1
fix eslint error
harjibbolar26 Jul 30, 2024
a2ed419
fix: remove comment
harjibbolar26 Jul 30, 2024
43aa9c2
Merge branch 'dev' into bulldozer/authentication
harjibbolar26 Jul 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { Inter } from "next/font/google";

import "./globals.css";

import { SessionProvider } from "next-auth/react";

import Providers from "~/components/providers";
import { Toaster } from "~/components/ui/toaster";

Expand All @@ -22,7 +24,7 @@ export default function RootLayout({
<body className={inter.className}>
<div className="mx-auto w-full">
<Providers />
{children}
<SessionProvider>{children}</SessionProvider>
<Toaster />
</div>
</body>
Expand Down
7 changes: 5 additions & 2 deletions src/components/card/user-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Avatar, AvatarImage } from "@radix-ui/react-avatar";
import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useState } from "react";

import { useUser } from "~/hooks/user/use-user";
import { cn } from "~/lib/utils";
import { Button } from "../ui/button";

const UserCard = ({ email }: { email: string }) => {
const UserCard = ({ image }: { image: string | undefined }) => {
const { updateUser } = useUser();
const [isLogout, setIsLogout] = useState(false);

Expand Down Expand Up @@ -37,7 +38,9 @@ const UserCard = ({ email }: { email: string }) => {
"grid size-9 place-items-center rounded-full bg-orange-500 text-xl font-medium text-white sm:text-2xl sm:font-bold",
)}
>
{email[0]}
<Avatar className="rounded-full">
<AvatarImage src={image} className="rounded-full" />
</Avatar>
</Button>
<AnimatePresence>
{isLogout && (
Expand Down
10 changes: 8 additions & 2 deletions src/components/layouts/navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";

import { useSession } from "next-auth/react";
import Link from "next/link";
import { useEffect, useState } from "react";

Expand All @@ -12,6 +13,8 @@ import MobileNav from "./mobile-navbar";

const Navbar = () => {
const [scrolling, setIsScrolling] = useState<boolean>(false);

const { data: session } = useSession();
const { user } = useUser();

const handleScrollEvent = () => {
Expand Down Expand Up @@ -55,7 +58,11 @@ const Navbar = () => {
);
})}
</div>
{!user.email && (
{session?.user?.email ? (
<div className="hidden md:flex">
<UserCard image={session?.user?.image as string} />
</div>
) : (
<div className="w-fullx hidden items-center justify-end gap-x-4 justify-self-end md:flex lg:gap-x-8">
<Link
href="/login"
Expand All @@ -71,7 +78,6 @@ const Navbar = () => {
</Link>
</div>
)}
{user.email && <UserCard email={user.email} />}
</div>
</nav>
);
Expand Down
57 changes: 32 additions & 25 deletions src/components/layouts/navbar/mobile-navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,19 @@
import "./menu.css";

import { motion, stagger, useAnimate } from "framer-motion";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { useEffect, useState } from "react";

import { useUser } from "~/hooks/user/use-user";
import UserCard from "~/components/card/user-card";
// import { useUser } from "~/hooks/user/use-user";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not needed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noted, would be rectified soon...

import { cn } from "~/lib/utils";
import { NAV_LINKS } from "./links";

export default function MobileNav() {
const [open, setOpen] = useState(false);
const [scope, animate] = useAnimate();
const { user } = useUser();
const { data: session } = useSession();

// the stagger effect
const staggerList = stagger(0.1, { startDelay: 0.25 });
Expand All @@ -25,7 +27,7 @@ export default function MobileNav() {
"ul",
{
width: open ? 180 : 0,
height: open && user.email ? 140 : open ? 250 : 0,
height: open && session?.user?.email ? 200 : open ? 250 : 0,
opacity: open ? 1 : 0,
},
{
Expand Down Expand Up @@ -103,29 +105,34 @@ export default function MobileNav() {
</Link>
</motion.li>
))}
<motion.li key={NAV_LINKS.length + 1}>
<Link
href="/login"
className={cn(
"grid max-w-[100px] place-items-center whitespace-nowrap rounded-md border border-primary px-2 py-2 text-sm text-primary",
user?.email ? "hidden" : "",
)}
>
Log in
</Link>
</motion.li>

<motion.li key={NAV_LINKS.length + 2}>
<Link
href="/register"
className={cn(
"grid max-w-[100px] place-items-center whitespace-nowrap rounded-md border border-primary bg-primary px-2 py-2 text-sm text-white",
user?.email ? "hidden" : "",
)}
>
Get Started
</Link>
</motion.li>
{!session?.user?.email && (
<>
<motion.li key={NAV_LINKS.length + 1}>
<Link
href="/login"
className="grid max-w-[100px] place-items-center whitespace-nowrap rounded-md border border-primary px-2 py-2 text-sm text-primary"
>
Log in
</Link>
</motion.li>

<motion.li key={NAV_LINKS.length + 2}>
<Link
href="/register"
className="grid max-w-[100px] place-items-center whitespace-nowrap rounded-md border border-primary bg-primary px-2 py-2 text-sm text-white"
>
Get Started
</Link>
</motion.li>
</>
)}

{session?.user?.email && (
<motion.li key={NAV_LINKS.length + 3}>
<UserCard image={session.user.image as string} />
</motion.li>
)}
</ul>
</div>
</>
Expand Down
31 changes: 31 additions & 0 deletions src/components/layouts/rootLayout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
"use client";

import { SessionProvider } from "next-auth/react";
import { Suspense } from "react";

import Footer from "~/components/layouts/footer";
import Navbar from "~/components/layouts/navbar";

function Layout({ children }: { children: React.ReactNode }) {
return (
<>
<Navbar />
<div className="mx-auto w-5/6">
<Suspense>{children}</Suspense>
</div>
<Footer />
</>
);
}

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<SessionProvider>
<Layout>{children}</Layout>
</SessionProvider>
);
}
10 changes: 6 additions & 4 deletions src/config/auth.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,16 @@ export default {
return false;
},
async jwt({ token, user, account }) {
if (account && account.provider !== "google") {
return { ...token, ...user };
}
const response: ApiResponse = (await googleAuth(
account as Profile,
)) as ApiResponse;
if (account && account.provider !== "google") {
return { ...token, ...response.data };
}
/* eslint-disable-next-line no-console */
console.log("Google Auth Response:", response.data);

return { ...token, ...response };
return { ...token, ...user };
},
async redirect({ url, baseUrl }) {
if (url === "/login") {
Expand Down
19 changes: 16 additions & 3 deletions src/utils/googleAuth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,24 @@ const googleAuth = async (profile: Profile) => {
id_token: profile.id_token,
});

return response?.data;
} catch (error) {
return {
response,
status: "error " + error,
status_code: 500,
message: "Google authentication failed",
data: {
id_token: "",
user: {
id: "",
email: "",
fullname: "",
avatar_url: "",
expires_in: "",
role: "",
},
},
};
} catch (error) {
return error;
}
};

Expand Down
Loading