switch to nx monorepo

apps/client/src/features/auth/atoms/auth-tokens-atom.ts

@@ -0,0 +1,14 @@
+import Cookies from "js-cookie";
+import { createJSONStorage, atomWithStorage } from "jotai/utils";
+import { ITokens } from '../types/auth.types';
+
+
+const cookieStorage = createJSONStorage<ITokens>(() => {
+  return {
+    getItem: () => Cookies.get("authTokens"),
+    setItem: (key, value) => Cookies.set(key, value),
+    removeItem: (key) => Cookies.remove(key),
+  };
+});
+
+export const authTokensAtom = atomWithStorage<ITokens | null>("authTokens", null, cookieStorage);

apps/client/src/features/auth/components/login-form.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import * as z from 'zod';
+
+import { useForm, zodResolver } from '@mantine/form';
+import useAuth from '@/features/auth/hooks/use-auth';
+import { ILogin } from '@/features/auth/types/auth.types';
+import {
+  Container,
+  Title,
+  Anchor,
+  Paper,
+  TextInput,
+  Button,
+  Text,
+  PasswordInput,
+} from '@mantine/core';
+import { Link } from 'react-router-dom';
+
+const formSchema = z.object({
+  email: z
+    .string({ required_error: 'email is required' })
+    .email({ message: 'Invalid email address' }),
+  password: z.string({ required_error: 'password is required' }),
+});
+
+export function LoginForm() {
+  const { signIn, isLoading } = useAuth();
+
+  const form = useForm<ILogin>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  async function onSubmit(data: ILogin) {
+    await signIn(data);
+  }
+
+  return (
+    <Container size={420} my={40}>
+      <Title ta="center" fw={800}>
+        Login
+      </Title>
+      <Text c="dimmed" size="sm" ta="center" mt={5}>
+        Don't have an account yet?{' '}
+        <Anchor size="sm" component={Link} to="/signup">
+          Create account
+        </Anchor>
+      </Text>
+
+      <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          <TextInput
+            id="email"
+            type="email"
+            label="Email"
+            placeholder="email@example.com"
+            required
+            {...form.getInputProps('email')}
+          />
+
+          <PasswordInput
+            label="Password"
+            placeholder="Your password"
+            required
+            mt="md"
+            {...form.getInputProps('password')}
+          />
+          <Button type="submit" fullWidth mt="xl" loading={isLoading}>
+            Sign In
+          </Button>
+        </form>
+      </Paper>
+    </Container>
+  );
+}

apps/client/src/features/auth/components/sign-up-form.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import * as z from 'zod';
+
+import { useForm, zodResolver } from '@mantine/form';
+import {
+  Container,
+  Title,
+  Anchor,
+  Paper,
+  TextInput,
+  Button,
+  Text,
+  PasswordInput,
+} from '@mantine/core';
+import { Link } from 'react-router-dom';
+import { IRegister } from '@/features/auth/types/auth.types';
+import useAuth from '@/features/auth/hooks/use-auth';
+
+const formSchema = z.object({
+  email: z
+    .string({ required_error: 'email is required' })
+    .email({ message: 'Invalid email address' }),
+  password: z.string({ required_error: 'password is required' }),
+});
+
+export function SignUpForm() {
+  const { signUp, isLoading } = useAuth();
+
+  const form = useForm<IRegister>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  async function onSubmit(data: IRegister) {
+    await signUp(data);
+  }
+
+  return (
+    <Container size={420} my={40}>
+      <Title ta="center" fw={800}>
+        Create an account
+      </Title>
+      <Text c="dimmed" size="sm" ta="center" mt={5}>
+        Already have an account?{' '}
+        <Anchor size="sm" component={Link} to="/login">
+          Login
+        </Anchor>
+      </Text>
+
+      <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          <TextInput
+            id="email"
+            type="email"
+            label="Email"
+            placeholder="email@example.com"
+            required
+            {...form.getInputProps('email')}
+          />
+
+          <PasswordInput
+            label="Password"
+            placeholder="Your password"
+            required
+            mt="md"
+            {...form.getInputProps('password')}
+          />
+          <Button type="submit" fullWidth mt="xl" loading={isLoading}>
+            Sign Up
+          </Button>
+        </form>
+      </Paper>
+    </Container>
+  );
+}

apps/client/src/features/auth/hooks/use-auth.ts

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { login, register } from '@/features/auth/services/auth-service';
+import { useNavigate } from 'react-router-dom';
+import { useAtom } from 'jotai';
+import { authTokensAtom } from '@/features/auth/atoms/auth-tokens-atom';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
+import { ILogin, IRegister } from '@/features/auth/types/auth.types';
+import { notifications } from '@mantine/notifications';
+
+export default function useAuth() {
+  const [isLoading, setIsLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const [, setCurrentUser] = useAtom(currentUserAtom);
+  const [authToken, setAuthToken] = useAtom(authTokensAtom);
+
+  const handleSignIn = async (data: ILogin) => {
+    setIsLoading(true);
+
+    try {
+      const res = await login(data);
+      setIsLoading(false);
+      setAuthToken(res.tokens);
+
+      navigate('/home');
+    } catch (err) {
+      setIsLoading(false);
+      notifications.show({
+        message: err.response?.data.message,
+        color: 'red',
+      });
+    }
+  };
+
+  const handleSignUp = async (data: IRegister) => {
+    setIsLoading(true);
+
+    try {
+      const res = await register(data);
+      setIsLoading(false);
+
+      setAuthToken(res.tokens);
+
+      navigate('/home');
+    } catch (err) {
+      setIsLoading(false);
+      notifications.show({
+        message: err.response?.data.message,
+        color: 'red',
+      });
+    }
+  };
+
+  const hasTokens = () => {
+    return !!authToken;
+  };
+
+  const handleLogout = async () => {
+    setAuthToken(null);
+    setCurrentUser(null);
+  };
+
+  return { signIn: handleSignIn, signUp: handleSignUp, isLoading, hasTokens };
+}

apps/client/src/features/auth/services/auth-service.ts

@@ -0,0 +1,12 @@
+import api from "@/lib/api-client";
+import { ILogin, IRegister, ITokenResponse } from "@/features/auth/types/auth.types";
+
+export async function login(data: ILogin): Promise<ITokenResponse>{
+  const req = await api.post<ITokenResponse>("/auth/login", data);
+  return req.data as ITokenResponse;
+}
+
+export async function register(data: IRegister): Promise<ITokenResponse>{
+  const req = await api.post<ITokenResponse>("/auth/register", data);
+  return req.data as ITokenResponse;
+}

apps/client/src/features/auth/types/auth.types.ts

@@ -0,0 +1,18 @@
+export interface ILogin {
+  email: string,
+  password: string
+}
+
+export interface IRegister {
+  email: string,
+  password: string
+}
+
+export interface ITokens {
+  accessToken: string,
+  refreshToken: string
+}
+
+export interface ITokenResponse {
+  tokens: ITokens
+}