-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
302 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| 'use client'; | ||
|
|
||
| import Link from 'next/link'; | ||
| import { Skeleton } from '@/components/ui/skeleton'; | ||
| import { Button } from "@/components/ui/button"; | ||
| // import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" | ||
| import useAuth from '@/hooks/useAuth'; | ||
|
|
||
| export default function LoginButton() { | ||
| const auth = useAuth(); | ||
|
|
||
| if (auth.isLoading) { | ||
| return <Skeleton className="w-20 h-10" />; | ||
| } | ||
|
|
||
| if (!auth.data?.loggedIn) { | ||
| return ( | ||
| <Button variant="outline" className="w-20" asChild> | ||
| <Link href="/login">로그인</Link> | ||
| </Button> | ||
| ); | ||
| } | ||
|
|
||
| // return ( | ||
| // <Avatar> | ||
| // <AvatarImage src={auth.data.user.userImage} alt={auth.data.user.userName} /> | ||
| // <AvatarFallback>{auth.data.user.userName.substring(0, 1)}</AvatarFallback> | ||
| // </Avatar> | ||
| // ); | ||
|
|
||
| return ( | ||
| <Button variant="outline" className="w-18" asChild> | ||
| <Link href={`${process.env.NEXT_PUBLIC_API_ORIGIN}/services/auth/v1/logout`}> | ||
| 로그아웃 | ||
| </Link> | ||
| </Button> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
| import * as AvatarPrimitive from "@radix-ui/react-avatar" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
|
|
||
| const Avatar = React.forwardRef< | ||
| React.ElementRef<typeof AvatarPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> | ||
| >(({ className, ...props }, ref) => ( | ||
| <AvatarPrimitive.Root | ||
| ref={ref} | ||
| className={cn( | ||
| "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| Avatar.displayName = AvatarPrimitive.Root.displayName | ||
|
|
||
| const AvatarImage = React.forwardRef< | ||
| React.ElementRef<typeof AvatarPrimitive.Image>, | ||
| React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> | ||
| >(({ className, ...props }, ref) => ( | ||
| <AvatarPrimitive.Image | ||
| ref={ref} | ||
| className={cn("aspect-square h-full w-full", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| AvatarImage.displayName = AvatarPrimitive.Image.displayName | ||
|
|
||
| const AvatarFallback = React.forwardRef< | ||
| React.ElementRef<typeof AvatarPrimitive.Fallback>, | ||
| React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> | ||
| >(({ className, ...props }, ref) => ( | ||
| <AvatarPrimitive.Fallback | ||
| ref={ref} | ||
| className={cn( | ||
| "flex h-full w-full items-center justify-center rounded-full bg-muted", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName | ||
|
|
||
| export { Avatar, AvatarImage, AvatarFallback } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import { useAtomValue } from 'jotai'; | ||
| import { atomWithQuery } from 'jotai-tanstack-query'; | ||
| import { importSPKI, jwtVerify } from 'jose'; | ||
|
|
||
| const JWT_PREFIX = 'http:cheda.kr/'; | ||
|
|
||
| type PrefixRoot<TPrefix extends string, TValue extends { [k: string]: any }> = { | ||
| [k in keyof TValue as k extends string ? `${TPrefix}${k}` : never]: TValue[k]; | ||
| }; | ||
|
|
||
| type SessionPayload = PrefixRoot<typeof JWT_PREFIX, { | ||
| user: { | ||
| userId: string; | ||
| userName: string; | ||
| userImage: string; | ||
| accessToken: string; | ||
| }; | ||
| }>; | ||
|
|
||
| type SecuredSessionPayload = PrefixRoot<typeof JWT_PREFIX, { | ||
| user: { | ||
| refreshToken: string; | ||
| }; | ||
| }>; | ||
|
|
||
| type StatePayload = PrefixRoot<typeof JWT_PREFIX, { | ||
| state: { | ||
| id: string; | ||
| url: string; | ||
| }; | ||
| }>; | ||
|
|
||
| type Auth = { | ||
| loggedIn: false; | ||
| user: null; | ||
| } | { | ||
| loggedIn: true; | ||
| user: { | ||
| userId: string; | ||
| userName: string; | ||
| userImage: string; | ||
| }; | ||
| }; | ||
|
|
||
| const authAtom = atomWithQuery<Auth>(() => ({ | ||
| queryKey: ['auth'], | ||
| queryFn: async () => { | ||
| const sessionId = document.cookie | ||
| .split('; ') | ||
| .find((cookie) => cookie.startsWith('session_id=')) | ||
| ?.match(/^([^=]+)=(.*)/) | ||
| ?.[2]; | ||
|
|
||
| try { | ||
| const publicKey = await importSPKI(process.env.NEXT_PUBLIC_JWT_KEY!, 'ES256'); | ||
| const token = await jwtVerify<SessionPayload>(sessionId ?? '', publicKey); | ||
|
|
||
| return { | ||
| loggedIn: true, | ||
| user: token.payload['http:cheda.kr/user'], | ||
| }; | ||
| } catch (e) { | ||
| const response = await fetch(`${process.env.NEXT_PUBLIC_API_ORIGIN}/services/auth/v1/me`, { | ||
| credentials: 'include', | ||
| }); | ||
|
|
||
| if (!response.ok) { | ||
| return { | ||
| loggedIn: false, | ||
| user: null, | ||
| }; | ||
| } | ||
|
|
||
| const result = await response.json(); | ||
|
|
||
| return { | ||
| loggedIn: true, | ||
| user: { | ||
| userId: result.id, | ||
| userName: result.name, | ||
| userImage: result.image, | ||
| }, | ||
| }; | ||
| } | ||
| }, | ||
| })); | ||
|
|
||
| export default function useAuth() { | ||
| return useAtomValue(authAtom); | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.