Skip to content

Commit f5ce020

Browse files
gregbrowndevgregbrowndev
committed
feat: add sign in and sign up with Firebase Auth
1 parent 66e7bce commit f5ce020

File tree

14 files changed

+387
-57
lines changed

14 files changed

+387
-57
lines changed

‎apps/web-ui/next.config.mjs

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
3-
webpack: (config, { isServer }) => {
3+
webpack: (config, {isServer}) => {
44
if (!isServer) {
55
}
66
return config;
77
},
88
experimental: {
99
instrumentationHook: true,
1010
},
11+
images: {
12+
// https://nextjs.org/docs/pages/api-reference/components/image#dangerouslyallowsvg
13+
dangerouslyAllowSVG: true,
14+
remotePatterns: [
15+
{
16+
hostname: "tailwindui.com",
17+
}
18+
]
19+
},
1120
};
1221

1322
export default nextConfig;

‎apps/web-ui/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"next": "14.2.3",
2424
"react": "^18",
2525
"react-dom": "^18",
26+
"tailwind-merge": "^2.3.0",
2627
"urql": "^4.0.7"
2728
},
2829
"devDependencies": {

‎apps/web-ui/src/app/(public)/auth/signIn/page.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
"use client";
2+
import {ComponentProps, useCallback} from 'react';
3+
import { signInWithEmailAndPassword } from 'firebase/auth';
4+
import {auth} from "@/contexts/firebase";
5+
import AuthForm from "@/components/AuthForm";
6+
import {Either} from "@/types/either.ts";
7+
import {useRouter} from "next/navigation";
8+
9+
type AuthFormProps = ComponentProps<typeof AuthForm>;
10+
11+
export default function Page() {
12+
const router = useRouter();
13+
14+
const handleSubmit = useCallback<AuthFormProps["onSubmit"]>(async (values) => {
15+
try {
16+
const {email, password} = values;
17+
await signInWithEmailAndPassword(auth, email, password);
18+
router.push("/");
19+
} catch (error: unknown) {
20+
if (error instanceof Error) {
21+
return Either.left(error.message);
22+
}
23+
return Either.left("Something went wrong");
24+
}
25+
}, [router]);
26+
27+
return (
28+
<div className="flex items-center justify-center h-screen">
29+
<AuthForm onSubmit={handleSubmit} type="signIn"/>
30+
</div>
31+
);
32+
}

‎apps/web-ui/src/app/(public)/auth/signUp/page.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
"use client";
2+
import {ComponentProps, useCallback} from 'react';
3+
import { createUserWithEmailAndPassword } from 'firebase/auth';
4+
import {auth} from "@/contexts/firebase";
5+
import AuthForm from "@/components/AuthForm";
6+
import {Either} from "@/types/either.ts";
7+
import { useRouter } from 'next/navigation';
8+
9+
type AuthFormProps = ComponentProps<typeof AuthForm>;
10+
11+
export default function Page() {
12+
const router = useRouter();
13+
14+
const handleSubmit = useCallback<AuthFormProps["onSubmit"]>(async (values) => {
15+
try {
16+
const {email, password} = values;
17+
await createUserWithEmailAndPassword(auth, email, password);
18+
router.push("/");
19+
} catch (error: unknown) {
20+
if (error instanceof Error) {
21+
return Either.left(error.message);
22+
}
23+
return Either.left("Something went wrong");
24+
}
25+
}, [router]);
26+
27+
return (
28+
<div className="flex items-center justify-center h-screen">
29+
<AuthForm onSubmit={handleSubmit} type="signUp"/>
30+
</div>
31+
);
32+
}

‎apps/web-ui/src/app/globals.css

+1-14
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,9 @@
88
--background-end-rgb: 255, 255, 255;
99
}
1010

11-
@media (prefers-color-scheme: dark) {
12-
:root {
13-
--foreground-rgb: 255, 255, 255;
14-
--background-start-rgb: 0, 0, 0;
15-
--background-end-rgb: 0, 0, 0;
16-
}
17-
}
1811

1912
body {
20-
color: rgb(var(--foreground-rgb));
21-
background: linear-gradient(
22-
to bottom,
23-
transparent,
24-
rgb(var(--background-end-rgb))
25-
)
26-
rgb(var(--background-start-rgb));
13+
2714
}
2815

2916
@layer utilities {

‎apps/web-ui/src/app/layout.tsx

+17-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import type { Metadata } from "next";
22
import { Inter } from "next/font/google";
33
import "./globals.css";
44
import { GraphqlProvider } from "@/contexts/graphql/provider";
5+
import React from "react";
6+
import Nav from "@/components/Nav";
7+
import {twMerge} from "tailwind-merge";
58

69
const inter = Inter({ subsets: ["latin"] });
710

@@ -16,10 +19,21 @@ export default function RootLayout({
1619
}: Readonly<{
1720
children: React.ReactNode;
1821
}>) {
22+
const isLoggedIn = false;
1923
return (
20-
<html lang="en">
21-
<body className={inter.className}>
22-
<GraphqlProvider>{children}</GraphqlProvider>
24+
<html lang="en" className="h-full bg-gray-100">
25+
<body className={twMerge(
26+
'h-full',
27+
inter.className
28+
)}>
29+
<GraphqlProvider>
30+
<div className="flex flex-col h-full">
31+
<Nav isLoggedIn={isLoggedIn}/>
32+
<main>
33+
{children}
34+
</main>
35+
</div>
36+
</GraphqlProvider>
2337
</body>
2438
</html>
2539
);

‎apps/web-ui/src/app/page.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@ export default function Home() {
1515
}
1616

1717
return (
18-
<main className="flex min-h-screen flex-col items-center justify-between p-24">
18+
<div className="py-8">
1919

20-
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
21-
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
22-
{result.data?.ping}
23-
</p>
24-
<button onClick={onButtonClick} type="button">Refresh</button>
20+
<div className="w-full max-w-4xl mx-auto font-mono text-sm px-4 py-4">
21+
<div className="mb-4">
22+
<p>{result.data?.ping}</p>
23+
</div>
24+
<button onClick={onButtonClick} type="button" className="w-full border border-gray-400 rounded-md py-2 px-4">Refresh</button>
2525
</div>
26-
</main>
26+
27+
</div>
2728
);
2829
}

‎apps/web-ui/src/components/AuthForm/index.tsx

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
"use client";
2+
import React, {useState, type FormEvent} from 'react';
3+
import type {Either} from "@/types/either.ts";
4+
5+
interface Props {
6+
type: 'signIn' | 'signUp';
7+
onSubmit: (values: FormValues) => Promise<Either<string, void> | void>;
8+
}
9+
10+
interface FormValues {
11+
email: string;
12+
password: string;
13+
}
14+
15+
const AuthForm: React.FC<Props> = ({type, onSubmit}) => {
16+
const [email, setEmail] = useState('');
17+
const [password, setPassword] = useState('');
18+
const [error, setError] = useState<string>();
19+
20+
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
21+
e.preventDefault();
22+
try {
23+
const result = await onSubmit({
24+
email,
25+
password,
26+
});
27+
if (result && result.kind === 'left') {
28+
setError(result.value);
29+
}
30+
} catch (error: unknown) {
31+
setError("Something went wrong");
32+
}
33+
};
34+
35+
return (
36+
<form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={handleSubmit}>
37+
<div className="mb-4">
38+
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
39+
Email
40+
</label>
41+
<input
42+
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
43+
id="email"
44+
onChange={(e) => {
45+
setEmail(e.target.value);
46+
}}
47+
placeholder="Email"
48+
required
49+
type="email"
50+
value={email}
51+
/>
52+
</div>
53+
<div className="mb-6">
54+
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
55+
Password
56+
</label>
57+
<input
58+
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
59+
id="password"
60+
onChange={(e) => {
61+
setPassword(e.target.value);
62+
}}
63+
placeholder="******************"
64+
required
65+
type="password"
66+
value={password}
67+
/>
68+
</div>
69+
{error ? <p className="text-red-500 text-xs italic">{error}</p> : null}
70+
<div className="flex items-center justify-between">
71+
<button
72+
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
73+
type="submit"
74+
>
75+
{type === 'signIn' ? 'Sign In' : 'Sign Up'}
76+
</button>
77+
</div>
78+
</form>
79+
);
80+
}
81+
82+
export default AuthForm;

‎apps/web-ui/src/components/Link/index.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, {ComponentProps} from "react";
2+
import {default as NextLink} from "next/link";
3+
import {twMerge} from "tailwind-merge";
4+
5+
type Props = ComponentProps<typeof NextLink> & {
6+
selected?: boolean;
7+
disabled?: boolean;
8+
}
9+
10+
const Link: React.FC<Props> = ({children, selected, disabled, ...props}) => {
11+
return (
12+
<NextLink
13+
{...props}
14+
target={disabled ? "_blank" : undefined}
15+
style={{
16+
...props.style,
17+
pointerEvents: (disabled) ? "none" : "auto",
18+
}}
19+
className={twMerge(
20+
"rounded-md px-3 py-2 text-sm font-medium",
21+
!!selected
22+
? "bg-gray-900 text-white"
23+
: "text-gray-300 hover:bg-gray-700 hover:text-white"
24+
)
25+
}
26+
aria-current={!!selected ? "page" : undefined}
27+
>
28+
{children}
29+
</NextLink>
30+
)
31+
}
32+
33+
export default Link;

‎apps/web-ui/src/components/Nav/index.tsx

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React from "react";
2+
import Link from "@/components/Link"
3+
import Image from "next/image";
4+
5+
// TODO: add sign in, signup, and signout links
6+
7+
interface Props {
8+
isLoggedIn?: boolean;
9+
}
10+
11+
const Nav: React.FC<Props> = ({isLoggedIn}) => {
12+
return (
13+
<nav className="bg-gray-800">
14+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
15+
<div className="flex h-16 items-center justify-between">
16+
{/* Logo and Links Section */}
17+
<div className="flex items-center">
18+
<div className="flex-shrink-0">
19+
<Image
20+
className="h-8 w-8"
21+
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
22+
width={32}
23+
height={32}
24+
alt="Domain Fusion"/>
25+
</div>
26+
{!!isLoggedIn && (
27+
<div className="hidden md:block">
28+
<div className="ml-10 flex items-baseline space-x-4">
29+
<Link
30+
href="#"
31+
selected={true}
32+
>
33+
Inbox
34+
</Link>
35+
<Link
36+
href="#"
37+
selected={false}
38+
disabled={true}
39+
>
40+
Calendar
41+
</Link>
42+
</div>
43+
</div>
44+
)}
45+
</div>
46+
47+
{/*<div className="hidden md:block">*/}
48+
{/* <div className="ml-4 flex items-center md:ml-6">*/}
49+
{/* <button type="button"*/}
50+
{/* className="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">*/}
51+
{/* <span className="absolute -inset-1.5"></span>*/}
52+
{/* <span className="sr-only">View notifications</span>*/}
53+
{/* <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"*/}
54+
{/* stroke="currentColor" aria-hidden="true">*/}
55+
{/* <path stroke-linecap="round" stroke-linejoin="round"*/}
56+
{/* d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"/>*/}
57+
{/* </svg>*/}
58+
{/* </button>*/}
59+
60+
{/* <div className="relative ml-3">*/}
61+
{/* <div>*/}
62+
{/* <button type="button"*/}
63+
{/* className="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"*/}
64+
{/* id="user-menu-button" aria-expanded="false" aria-haspopup="true">*/}
65+
{/* <span className="absolute -inset-1.5"></span>*/}
66+
{/* <span className="sr-only">Open user menu</span>*/}
67+
{/* <img className="h-8 w-8 rounded-full"*/}
68+
{/* src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"*/}
69+
{/* alt=""/>*/}
70+
{/* </button>*/}
71+
{/* </div>*/}
72+
73+
{/* /!* Drop down menu *!/*/}
74+
{/* <div*/}
75+
{/* className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"*/}
76+
{/* role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button"*/}
77+
{/* tabIndex={-1}>*/}
78+
{/* <a href="#" className="block px-4 py-2 text-sm text-gray-700" role="menuitem"*/}
79+
{/* tabIndex={-1} id="user-menu-item-0">Your Profile</a>*/}
80+
{/* <a href="#" className="block px-4 py-2 text-sm text-gray-700" role="menuitem"*/}
81+
{/* tabIndex={-1} id="user-menu-item-1">Settings</a>*/}
82+
{/* <a href="#" className="block px-4 py-2 text-sm text-gray-700" role="menuitem"*/}
83+
{/* tabIndex={-1} id="user-menu-item-2">Sign out</a>*/}
84+
{/* </div>*/}
85+
{/* </div>*/}
86+
{/* </div>*/}
87+
{/*</div>*/}
88+
89+
</div>
90+
</div>
91+
</nav>
92+
)
93+
}
94+
95+
export default Nav;

0 commit comments

Comments
 (0)