Skip to content

Commit 49ae1f2

Browse files
git-create-devbengit-create-devben
committed
add login auth
1 parent 0815645 commit 49ae1f2

File tree

15 files changed

+931
-56
lines changed

15 files changed

+931
-56
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
{
22
"cSpell.words": [
3+
"googlebutoon",
34
"handleclick",
45
"kinde",
56
"nextjs",
67
"signin",
8+
"signout",
9+
"sonner",
710
"trpc"
811
]
912
}

‎app/layout.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { Poppins } from "next/font/google";
33
import "../styles/globals.css";
44
import Navbar from "@/components/navbar";
55
import { ClerkProvider } from "@clerk/nextjs";
6+
import { Toaster } from "@/components/ui/sonner"
7+
8+
9+
610

711
const poppins = Poppins({
812
subsets: ["latin"],
@@ -25,6 +29,7 @@ export default function RootLayout({
2529
<body className={`${poppins.className} container`}>
2630
<Navbar/>
2731
{children}
32+
<Toaster />
2833
</body>
2934
</html>
3035
</ClerkProvider>

‎app/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export default function Home() {
55
<main className="">
66
{/* <Navbar /> */}
77
<Hero/>
8+
89
</main>
910
);
1011
}

‎app/sign-up/googlebutoon.jsx‎

Whitespace-only changes.

‎app/sign-up/page.tsx‎

Lines changed: 89 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,25 @@
22
import { useState } from "react";
33
import { useSignUp, useSignIn } from "@clerk/nextjs";
44
import { useRouter } from "next/navigation";
5+
import { toast } from "sonner";
56

7+
import { Button } from "@/components/ui/button";
8+
import { useClerk } from "@clerk/clerk-react";
9+
10+
11+
// import GButton from "./googlebutoon"
612
export default function SignUpForm() {
713
const { isLoaded, signUp, setActive, setSession } = useSignUp();
814
const [emailAddress, setEmailAddress] = useState("");
915
const [password, setPassword] = useState("");
16+
const [username, setUsername] = useState("");
17+
const [error, setError] = useState(null);
1018
const [pendingVerification, setPendingVerification] = useState(false);
1119
const [code, setCode] = useState("");
1220
const router = useRouter();
1321
// start the sign up process.
1422

15-
const handleSubmit = async (e: any) => {
23+
async function handleSubmit(e: any) {
1624
e.preventDefault();
1725
if (!isLoaded) {
1826
return;
@@ -22,6 +30,7 @@ export default function SignUpForm() {
2230
await signUp.create({
2331
emailAddress,
2432
password,
33+
username,
2534
});
2635

2736
// send the email.
@@ -31,20 +40,10 @@ export default function SignUpForm() {
3140
setPendingVerification(true);
3241
} catch (err: any) {
3342
console.error(JSON.stringify(err, null, 2));
43+
setError(err.errors[0].message);
3444
}
35-
};
45+
}
3646

37-
const handleOAuthSignIn = async (provider: any) => {
38-
try {
39-
await signInOAuth({
40-
provider: provider,
41-
signInUrl: "/sso-callback", // Adjust as per your configuration
42-
callbackUrl: "/", // Adjust as per your configuration
43-
});
44-
} catch (err) {
45-
console.error(err);
46-
}
47-
};
4847
// This verifies the user using email code that is delivered.
4948
const onPressVerify = async (e: any) => {
5049
e.preventDefault();
@@ -57,8 +56,6 @@ export default function SignUpForm() {
5756
code,
5857
});
5958
if (completeSignUp.status !== "complete") {
60-
/* investigate the response, to see if there was an error
61-
or if the user needs to complete more steps.*/
6259
console.log(JSON.stringify(completeSignUp, null, 2));
6360
}
6461
if (completeSignUp.status === "complete") {
@@ -67,28 +64,48 @@ export default function SignUpForm() {
6764
}
6865
} catch (err: any) {
6966
console.error(JSON.stringify(err, null, 2));
67+
setError(err.errors[0].message);
7068
}
7169
};
7270

7371
return (
74-
<div className="block m-auto bg-[#ffffff] rounded-xl w-full max-w-96 p-8">
72+
<div className="block mt-20 m-auto bg-[#ffffff] rounded-xl w-full max-w-96 p-8">
7573
{!pendingVerification && (
7674
<>
7775
<div className="flex flex-col justify-center text-center space-y-4">
7876
<div className="logo_container m-auto"> </div>
7977
<div>
80-
<h2 className="text-2xl text-[#212121] font-extrabold">
81-
SignUp
82-
</h2>
78+
<h2 className="text-2xl text-[#212121] font-extrabold">SignUp</h2>
8379
<p className="text-sm text-[#8B8E98]">
84-
Get started with our app, just create an account and enjoy the
80+
Get started with DevIdeal, just create an account and enjoy the
8581
experience
8682
</p>
8783
</div>
8884
</div>
8985
<form className="mt-10 space-y-4">
9086
<div className="flex flex-col">
91-
<label htmlFor="email" className="text-md text-[#8B8E98] font-bold">Email</label>
87+
<label
88+
htmlFor="username"
89+
className="text-md text-[#8B8E98] font-bold"
90+
>
91+
Username
92+
</label>
93+
<input
94+
onChange={(e) => setUsername(e.target.value)}
95+
id="username"
96+
name="username"
97+
type="text"
98+
placeholder="DevIdeal2024"
99+
className=" placeholder:text-sm placeholder:p-4 w-auto h-[40px] p-[0 0 0 40px] rounded-md border-2 border-solid border-[#e5e5e5] filter shadow-sm outline-none transition-all focus:border-transparent focus:shadow-xl focus:bg-transparent"
100+
/>
101+
</div>
102+
<div className="flex flex-col">
103+
<label
104+
htmlFor="email"
105+
className="text-md text-[#8B8E98] font-bold"
106+
>
107+
Email
108+
</label>
92109
<input
93110
onChange={(e) => setEmailAddress(e.target.value)}
94111
id="email"
@@ -99,7 +116,12 @@ export default function SignUpForm() {
99116
/>
100117
</div>
101118
<div className="flex flex-col">
102-
<label htmlFor="password" className="text-md text-[#8B8E98] font-bold">Password</label>
119+
<label
120+
htmlFor="password"
121+
className="text-md text-[#8B8E98] font-bold"
122+
>
123+
Password
124+
</label>
103125
<input
104126
onChange={(e) => setPassword(e.target.value)}
105127
id="password"
@@ -109,31 +131,64 @@ export default function SignUpForm() {
109131
className=" placeholder:text-sm placeholder:p-4 w-auto h-[40px] p-[0 0 0 40px] rounded-md border-2 border-solid border-[#e5e5e5] filter shadow-sm outline-none transition-all focus:border-transparent focus:shadow-xl focus:bg-transparent"
110132
/>
111133
</div>
112-
<button onClick={handleSubmit} className="w-full h-[40px] border-0 rounded-md outline-none text-[#ffffff] cursor-pointer bg-[#115DFC]">Sign up</button>
113-
<div className="divider">OR</div>
114-
<button onClick={() => handleOAuthSignIn("google")} className="w-full h-[40px] border-0 rounded-md outline-none text-[#ffffff] cursor-pointer bg-[#115DFC]">Sign in with Google</button>
134+
<button
135+
onClick={(e) => {
136+
handleSubmit(e);
137+
e.preventDefault();
138+
toast("Error message", {
139+
description: `${error}`,
140+
action: {
141+
label: "Undo",
142+
onClick: () => console.log("Undo"),
143+
},
144+
});
145+
}}
146+
className="w-full h-[40px] border-0 rounded-md outline-none text-[#ffffff] cursor-pointer bg-[#115DFC]"
147+
>
148+
Sign up
149+
</button>
150+
151+
<p className="text-red-400 text-md font-extrabold"> {error}</p>
152+
153+
{/* <Button
154+
variant="outline"
155+
onClick={(e) => {
156+
e.preventDefault();
157+
toast("Event has been created", {
158+
description: "Sunday, December 03, 2023 at 9:00 AM",
159+
action: {
160+
label: "Undo",
161+
onClick: () => console.log("Undo"),
162+
},
163+
});
164+
}}
165+
>
166+
Show Toast
167+
</Button> */}
168+
169+
{/* <div className="divider">OR</div> */}
170+
{/* <button className="w-full h-[40px] border-0 rounded-md outline-none text-[#ffffff] cursor-pointer bg-[#115DFC]"><GButton/></button> */}
115171
</form>
116172
</>
117173
)}
118174
{pendingVerification && (
119175
<div>
120-
<form>
176+
<form className="space-y-4 flex flex-col">
121177
<input
122178
value={code}
123179
placeholder="Code..."
124180
onChange={(e) => setCode(e.target.value)}
181+
className=" placeholder:text-sm placeholder:p-4 w-auto h-[40px] p-[0 0 0 40px] rounded-md border-2 border-solid border-[#e5e5e5] filter shadow-sm outline-none transition-all focus:border-transparent focus:shadow-xl focus:bg-transparent"
125182
/>
126-
<button onClick={onPressVerify}>Verify Email</button>
183+
<button
184+
onClick={onPressVerify}
185+
className="w-full h-[40px] border-0 rounded-md outline-none text-[#ffffff] cursor-pointer bg-[#115DFC]"
186+
>
187+
Verify Email
188+
</button>
127189
</form>
128190
</div>
129191
)}
130192
</div>
131193
);
132194
}
133-
function signInOAuth(arg0: {
134-
provider: any; signInUrl: string; // Adjust as per your configuration
135-
callbackUrl: string;
136-
}) {
137-
throw new Error("Function not implemented.");
138-
}
139-

‎app/signIn/page.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import { useSignIn } from "@clerk/nextjs";
5+
import { useRouter } from "next/navigation";
6+
7+
export default function SignIn() {
8+
const { isLoaded, signIn, setActive } = useSignIn();
9+
const [email, setEmail] = React.useState("");
10+
const [password, setPassword] = React.useState("");
11+
const router = useRouter();
12+
13+
// Handle the submission of the sign-in form
14+
const handleSubmit = async (e: React.FormEvent) => {
15+
e.preventDefault();
16+
if (!isLoaded) {
17+
return;
18+
}
19+
20+
// Start the sign-in process using the email and password provided
21+
try {
22+
const completeSignIn = await signIn.create({
23+
identifier: email,
24+
password,
25+
});
26+
27+
if (completeSignIn.status !== "complete") {
28+
console.log(JSON.stringify(completeSignIn, null, 2));
29+
}
30+
31+
if (completeSignIn.status === "complete") {
32+
await setActive({ session: completeSignIn.createdSessionId });
33+
router.push("/");
34+
}
35+
} catch (err: any) {
36+
console.error(JSON.stringify(err, null, 2));
37+
}
38+
};
39+
40+
return (
41+
<div className="block mt-20 m-auto bg-[#ffffff] rounded-xl w-full max-w-96 p-8">
42+
<div className="flex flex-col justify-center text-center space-y-4">
43+
<div className="logo_container m-auto"> </div>
44+
<div>
45+
<h2 className="text-2xl text-[#212121] font-extrabold">
46+
Welcome back
47+
</h2>
48+
<p className="text-sm text-[#8B8E98]">
49+
Log-In to continue experience DevIdeal
50+
</p>
51+
</div>
52+
</div>
53+
<form onSubmit={(e) => handleSubmit(e)} className="mt-10 space-y-4">
54+
<div className="flex flex-col">
55+
<label htmlFor="email" className="text-md text-[#8B8E98] font-bold">
56+
Email
57+
</label>
58+
<input
59+
onChange={(e) => setEmail(e.target.value)}
60+
id="email"
61+
name="email"
62+
type="email"
63+
value={email}
64+
className=" placeholder:text-sm placeholder:p-4 w-auto h-[40px] p-[0 0 0 40px] rounded-md border-2 border-solid border-[#e5e5e5] filter shadow-sm outline-none transition-all focus:border-transparent focus:shadow-xl focus:bg-transparent"
65+
/>
66+
</div>
67+
<div className="flex flex-col">
68+
<label
69+
htmlFor="password"
70+
className="text-md text-[#8B8E98] font-bold"
71+
>
72+
Password
73+
</label>
74+
<input
75+
onChange={(e) => setPassword(e.target.value)}
76+
id="password"
77+
name="password"
78+
type="password"
79+
value={password}
80+
className=" placeholder:text-sm placeholder:p-4 w-auto h-[40px] p-[0 0 0 40px] rounded-md border-2 border-solid border-[#e5e5e5] filter shadow-sm outline-none transition-all focus:border-transparent focus:shadow-xl focus:bg-transparent"
81+
/>
82+
</div>
83+
<button
84+
type="submit"
85+
className="w-full h-[40px] border-0 rounded-md outline-none text-[#ffffff] cursor-pointer bg-[#115DFC]"
86+
>
87+
Sign In
88+
</button>
89+
</form>
90+
</div>
91+
);
92+
}

0 commit comments

Comments
 (0)