Skip to content

Commit 95a7364

Browse files
robinjhuangpaulgrigorosita
robinjhuang
and
paulgrigorosita
authored
implemented authentication of google and github and also update header (#4)
* implemented authentication of google and github and also update header also fix route * Update lock file. --------- Co-authored-by: Paul <[email protected]>
1 parent 47f8ad5 commit 95a7364

File tree

15 files changed

+360
-62
lines changed

15 files changed

+360
-62
lines changed

‎.env

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
NEXT_PUBLIC_FIREBASE_API_KEY="AIzaSyDa_YMeyzV0SkVe92vBZ1tVikWBmOU5KVE"
22
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="dreamboothy-dev.firebaseapp.com"
33
NEXT_PUBLIC_FIREBASE_PROJECT_ID="dreamboothy-dev"
4-
NEXT_PUBLIC_BACKEND_URL="http://localhost:8080"
4+
NEXT_PUBLIC_BACKEND_URL="http://localhost:8080"
5+
NEXT_GITHUB_ID="Ov23liMdNpGS70ScvXh4"
6+
NEXT_GITHUB_SECRET="0fcb111a59189124efe213b41aed03f85fdb2f52"
7+
NEXT_GOOGLE_ID="1033576313434-4gmmlki3tfeqsp0u7vmn6kpbbl1hksrr.apps.googleusercontent.com"
8+
NEXT_GOOGLE_SECRET="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"
9+

‎components/Header/Header.tsx

+29-9
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,41 @@
11
import React from 'react'
22
import Image from 'next/image'
3+
import { signIn, signOut, useSession } from 'next-auth/react'
34
import {
5+
Avatar,
46
Button,
57
Navbar,
68
NavbarBrand,
79
NavbarCollapse,
810
NavbarToggle,
911
} from 'flowbite-react'
12+
import { useRouter } from 'next/router'
1013

1114
interface HeaderProps {
1215
isLoggedIn?: boolean
1316
title?: string
1417
}
1518

1619
const Header: React.FC<HeaderProps> = ({ isLoggedIn, title }) => {
20+
const { data: session } = useSession()
21+
const router = useRouter()
22+
23+
const handleSignOut = async () => {
24+
try {
25+
await signOut({ callbackUrl: '/' })
26+
} catch (error) {
27+
console.error('Sign out error:', error)
28+
// Handle sign-out error
29+
}
30+
}
31+
32+
const userName = session?.user?.name
33+
const abbreviatedName = userName ? userName.slice(0, 2).toUpperCase() : ''
34+
1735
return (
1836
<Navbar
1937
fluid
20-
className="mx-auto p-8"
38+
className="p-8 mx-auto"
2139
style={{ backgroundColor: 'rgb(17 24 39)' }}
2240
>
2341
<NavbarBrand href="/">
@@ -40,29 +58,31 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, title }) => {
4058
color="light"
4159
className="bg-gray-900"
4260
>
43-
<span className="text-white text-base font-medium">
61+
<span className="text-base font-medium text-white">
4462
{title}
4563
</span>
4664
</Button>
4765

4866
<Button
49-
href="/auth/login"
5067
color="light"
51-
className="bg-gray-800 w-[50px] h-[50px] rounded-[999px] border-gray-700 outline-none "
68+
className="bg-gray-800 w-[50px] h-[50px] rounded-[999px] border-gray-700 outline-none hover:bg-gray-800 "
5269
>
53-
<span className="text-white text-base font-medium">
54-
GE
70+
<span className="text-base font-medium text-white">
71+
{abbreviatedName}
5572
</span>
5673
</Button>
74+
<Button onClick={handleSignOut} color="blue">
75+
Sign out
76+
</Button>
5777
</>
5878
) : (
5979
<>
6080
<Button
61-
href="/auth/login"
81+
href="/auth/signin"
6282
color="light"
6383
className="bg-gray-800 border-none outline-none "
6484
>
65-
<span className="text-white text-base font-medium">
85+
<span className="text-base font-medium text-white">
6686
Log in
6787
</span>
6888
</Button>
@@ -74,7 +94,7 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, title }) => {
7494
)}
7595
<NavbarToggle theme={{ icon: 'h-5 w-5 shrink-0' }} />
7696
</div>
77-
<NavbarCollapse></NavbarCollapse>
97+
{/* <NavbarCollapse></NavbarCollapse> */}
7898
</Navbar>
7999
)
80100
}

‎components/SignIn/SignIn.tsx

+25-18
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { Button, Card, TextInput } from 'flowbite-react'
1+
import { Button, Card } from 'flowbite-react'
22
import Link from 'next/link'
33
import { useRouter } from 'next/router'
4+
5+
import { signIn, signOut, useSession } from 'next-auth/react'
46
import React, { useState } from 'react'
57

68
const SignIn = () => {
@@ -16,16 +18,22 @@ const SignIn = () => {
1618
[e.target.id]: e.target.value,
1719
})
1820
}
19-
20-
const handleSignIn = async (e) => {
21-
e.preventDefault()
22-
23-
// Perform sign-in logic here with formData
24-
25-
// Redirect to /publisher route after sign-in
26-
router.push('/publisher')
21+
const handleSignInGoogle = async (provider) => {
22+
try {
23+
await signIn(provider, { callbackUrl: '/nodes' })
24+
} catch (error) {
25+
console.error('Sign in error:', error)
26+
// Handle sign-in error
27+
}
28+
}
29+
const handleSignInGithub = async (provider) => {
30+
try {
31+
await signIn(provider, { callbackUrl: '/nodes' })
32+
} catch (error) {
33+
console.error('Sign in error:', error)
34+
// Handle sign-in error
35+
}
2736
}
28-
2937
return (
3038
<section>
3139
<div className="flex items-center justify-center max-w-screen-xl px-4 py-16 mx-auto lg:grid lg:grid-cols-12 lg:gap-20 h-[100vh]">
@@ -49,8 +57,8 @@ const SignIn = () => {
4957
<div className="mt-10 space-y-3 sm:space-x-4 sm:space-y-0">
5058
<Button
5159
color="gray"
52-
href="#"
53-
className="font-bold "
60+
onClick={() => handleSignInGoogle('google')}
61+
className="w-full font-bold"
5462
>
5563
<svg
5664
className="w-5 h-5 mr-2"
@@ -94,7 +102,7 @@ const SignIn = () => {
94102
</div>
95103
<Button
96104
color="gray"
97-
href="#"
105+
onClick={() => handleSignInGithub('github')}
98106
className="mt-2 font-bold hover:bg-gray-50"
99107
>
100108
<svg
@@ -118,11 +126,10 @@ const SignIn = () => {
118126
</Button>
119127
<p className="flex justify-center mt-4 text-sm font-medium text-gray-50 ">
120128
New to Comfy Registry?&nbsp;
121-
<Link
122-
href="/auth/signup"
123-
className="font-medium text-blue-600 text-primary-500 hover:underline "
124-
>
125-
Sign up
129+
<Link href="/auth/signup">
130+
<a className="font-medium text-blue-600 hover:underline">
131+
Sign up
132+
</a>
126133
</Link>
127134
</p>
128135
</Card>

‎components/SignUp/SignUp.tsx

+23-22
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
import { Button, Card, TextInput } from 'flowbite-react'
2+
import { signIn } from 'next-auth/react'
23
import Link from 'next/link'
34
import { useRouter } from 'next/router'
45
import React, { useState } from 'react'
56

67
const SignUp = () => {
78
const router = useRouter()
8-
const [formData, setFormData] = useState({
9-
email: '',
10-
password: '',
11-
})
129

13-
const handleInputChange = (e) => {
14-
setFormData({
15-
...formData,
16-
[e.target.id]: e.target.value,
17-
})
10+
const handleSignUpGoogle = async (provider) => {
11+
try {
12+
await signIn(provider)
13+
} catch (error) {
14+
console.error('Sign in error:', error)
15+
// Handle sign-in error
16+
}
1817
}
19-
20-
const handleSignUp = async (e) => {
21-
e.preventDefault()
22-
23-
router.push('/publisher')
18+
const handleSignUpGithub = async (provider) => {
19+
try {
20+
await signIn(provider, { callbackUrl: '/nodes' })
21+
} catch (error) {
22+
console.error('Sign in error:', error)
23+
// Handle sign-in error
24+
}
2425
}
2526

2627
return (
@@ -48,8 +49,8 @@ const SignUp = () => {
4849
<div className="mt-5 space-y-3 sm:space-x-4 sm:space-y-0">
4950
<Button
5051
color="gray"
51-
href="#"
52-
className="font-bold "
52+
onClick={() => handleSignUpGoogle('google')}
53+
className="w-full font-bold"
5354
>
5455
<svg
5556
className="w-5 h-5 mr-2"
@@ -93,7 +94,7 @@ const SignUp = () => {
9394
</div>
9495
<Button
9596
color="gray"
96-
href="#"
97+
onClick={() => handleSignUpGithub('github')}
9798
className="mt-2 font-bold hover:bg-gray-50"
9899
>
99100
<svg
@@ -117,11 +118,11 @@ const SignUp = () => {
117118
</Button>
118119
<p className="flex justify-center mt-4 text-sm font-medium text-gray-50 ">
119120
New to Comfy Registry?&nbsp;
120-
<Link
121-
href="/auth/login"
122-
className="font-medium text-blue-600 text-primary-500 hover:underline "
123-
>
124-
Log In
121+
<Link href="/auth/signin">
122+
<a className="font-medium text-blue-600 text-primary-500 hover:underline ">
123+
{' '}
124+
Log In
125+
</a>
125126
</Link>
126127
</p>
127128
</Card>

‎components/layout.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,17 @@ import Header from './Header/Header'
55
import Container from './common/Container'
66
import 'react-toastify/dist/ReactToastify.css'
77
import { ToastContainer } from 'react-toastify'
8+
import { useSession } from 'next-auth/react'
89

910
export default function Layout({ children }: React.PropsWithChildren) {
11+
const { data: session } = useSession()
1012
const router = useRouter()
1113
const isLoginPage = router.pathname === '/auth/login'
1214
const isSignupPage = router.pathname === '/auth/signup'
1315
const isReservedPath = /^\/(auth|api|_error|_app|_document)/.test(
1416
router.pathname
1517
)
16-
18+
const isLoggedIn = !!session
1719
return (
1820
<>
1921
<Head>
@@ -26,7 +28,7 @@ export default function Layout({ children }: React.PropsWithChildren) {
2628
</Head>
2729
<Container>
2830
{!(isLoginPage || isSignupPage || isReservedPath) && (
29-
<Header isLoggedIn={false} title={'Your Nodes'} />
31+
<Header isLoggedIn={isLoggedIn} title={'Your Nodes'} />
3032
)}
3133
<main>{children}</main>
3234
</Container>

‎components/nodes/Nodes.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ const Nodes: React.FC = () => {
117117
<NodesCard
118118
key={index}
119119
{...member}
120-
buttonLink={`/nodes/${member.id}`}
120+
buttonLink={`/nodes/publisher-detail/${member.id}`}
121121
/>
122122
))}
123123
</div>

0 commit comments

Comments
 (0)