chore: migrate auth service

frontend/web/src/components/Header.tsx

@@ -2,10 +2,10 @@ import { Avatar } from "@mui/joy";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation } from "react-router-dom";
+import { authServiceClient } from "@/grpcweb";
 import useWorkspaceStore from "@/stores/v1/workspace";
 import { PlanType } from "@/types/proto/api/v2/subscription_service";
 import { Role } from "@/types/proto/api/v2/user_service";
-import * as api from "../helpers/api";
 import useUserStore from "../stores/v1/user";
 import AboutDialog from "./AboutDialog";
 import Icon from "./Icon";
@@ -22,7 +22,8 @@ const Header: React.FC = () => {
   const shouldShowRouterSwitch = location.pathname === "/" || location.pathname === "/collections";
 
   const handleSignOutButtonClick = async () => {
-    await api.signout();
+    await authServiceClient.signOut({});
+    document.cookie = "slash.access-token=; path=/;";
     localStorage.removeItem("userId");
     window.location.href = "/auth";
   };

frontend/web/src/grpcweb.ts

@@ -1,4 +1,5 @@
 import { createChannel, createClientFactory, FetchTransport } from "nice-grpc-web";
+import { AuthServiceDefinition } from "./types/proto/api/v2/auth_service";
 import { CollectionServiceDefinition } from "./types/proto/api/v2/collection_service";
 import { ShortcutServiceDefinition } from "./types/proto/api/v2/shortcut_service";
 import { SubscriptionServiceDefinition } from "./types/proto/api/v2/subscription_service";
@@ -17,9 +18,11 @@ const channel = createChannel(
 
 const clientFactory = createClientFactory();
 
+export const workspaceServiceClient = clientFactory.create(WorkspaceServiceDefinition, channel);
+
 export const subscriptionServiceClient = clientFactory.create(SubscriptionServiceDefinition, channel);
 
-export const workspaceServiceClient = clientFactory.create(WorkspaceServiceDefinition, channel);
+export const authServiceClient = clientFactory.create(AuthServiceDefinition, channel);
 
 export const userServiceClient = clientFactory.create(UserServiceDefinition, channel);
 

frontend/web/src/helpers/api.ts

@@ -1,20 +0,0 @@
-import axios from "axios";
-
-export function signin(email: string, password: string) {
-  return axios.post<User>("/api/v1/auth/signin", {
-    email,
-    password,
-  });
-}
-
-export function signup(email: string, nickname: string, password: string) {
-  return axios.post<User>("/api/v1/auth/signup", {
-    email,
-    nickname,
-    password,
-  });
-}
-
-export function signout() {
-  return axios.post("/api/v1/auth/logout");
-}

frontend/web/src/pages/SignIn.tsx

@@ -3,10 +3,10 @@ import React, { FormEvent, useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { authServiceClient } from "@/grpcweb";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import useUserStore from "@/stores/v1/user";
 import useWorkspaceStore from "@/stores/v1/workspace";
-import * as api from "../helpers/api";
 import useLoading from "../hooks/useLoading";
 
 const SignIn: React.FC = () => {
@@ -44,9 +44,10 @@ const SignIn: React.FC = () => {
 
     try {
       actionBtnLoadingState.setLoading();
-      const { data: user } = await api.signin(email, password);
+      const { user, accessToken } = await authServiceClient.signIn({ email, password });
       if (user) {
         userStore.setCurrentUserId(user.id);
+        document.cookie = `slash.access-token=${accessToken}; path=/;`;
         await userStore.fetchCurrentUser();
         navigateTo("/");
       } else {

frontend/web/src/pages/SignUp.tsx

@@ -3,10 +3,10 @@ import React, { FormEvent, useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { authServiceClient } from "@/grpcweb";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import useUserStore from "@/stores/v1/user";
 import useWorkspaceStore from "@/stores/v1/workspace";
-import * as api from "../helpers/api";
 import useLoading from "../hooks/useLoading";
 
 const SignUp: React.FC = () => {
@@ -51,9 +51,14 @@ const SignUp: React.FC = () => {
 
     try {
       actionBtnLoadingState.setLoading();
-      const { data: user } = await api.signup(email, nickname, password);
+      const { user, accessToken } = await authServiceClient.signUp({
+        email,
+        nickname,
+        password,
+      });
       if (user) {
         userStore.setCurrentUserId(user.id);
+        document.cookie = `slash.access-token=${accessToken}; path=/;`;
         await userStore.fetchCurrentUser();
         navigateTo("/");
       } else {

frontend/web/src/types/modules/user.d.ts

@@ -1,5 +0,0 @@
-interface User {
-  id: number;
-  email: string;
-  nickname: string;
-}