chore: migrate auth service

frontend/web/package.json

@@ -13,7 +13,6 @@
     "@emotion/styled": "^11.11.0",
     "@mui/joy": "5.0.0-beta.14",
     "@reduxjs/toolkit": "^1.9.7",
-    "axios": "^1.6.2",
     "classnames": "^2.3.2",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.10",

frontend/web/pnpm-lock.yaml

@@ -17,9 +17,6 @@ dependencies:
   '@reduxjs/toolkit':
     specifier: ^1.9.7
     version: 1.9.7(react@18.2.0)
-  axios:
-    specifier: ^1.6.2
-    version: 1.6.2
   classnames:
     specifier: ^2.3.2
     version: 2.3.2
@@ -1482,10 +1479,6 @@ packages:
       has-symbols: 1.0.3
     dev: true
 
-  /asynckit@0.4.0:
-    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
-    dev: false
-
   /autoprefixer@10.4.16(postcss@8.4.31):
     resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1507,16 +1500,6 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /axios@1.6.2:
-    resolution: {integrity: sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==}
-    dependencies:
-      follow-redirects: 1.15.3
-      form-data: 4.0.0
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-    dev: false
-
   /babel-plugin-macros@3.1.0:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
@@ -1637,13 +1620,6 @@ packages:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
-  /combined-stream@1.0.8:
-    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
-    engines: {node: '>= 0.8'}
-    dependencies:
-      delayed-stream: 1.0.0
-    dev: false
-
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
@@ -1743,11 +1719,6 @@ packages:
       object-keys: 1.1.1
     dev: true
 
-  /delayed-stream@1.0.0:
-    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
-    engines: {node: '>=0.4.0'}
-    dev: false
-
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
     dev: false
@@ -2148,31 +2119,12 @@ packages:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
     dev: true
 
-  /follow-redirects@1.15.3:
-    resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dev: false
-
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
       is-callable: 1.2.7
     dev: true
 
-  /form-data@4.0.0:
-    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
-    engines: {node: '>= 6'}
-    dependencies:
-      asynckit: 0.4.0
-      combined-stream: 1.0.8
-      mime-types: 2.1.35
-    dev: false
-
   /fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: true
@@ -2747,18 +2699,6 @@ packages:
       braces: 3.0.2
       picomatch: 2.3.1
 
-  /mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-    dev: false
-
-  /mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-    dependencies:
-      mime-db: 1.52.0
-    dev: false
-
   /minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -3093,10 +3033,6 @@ packages:
       long: 5.2.3
     dev: true
 
-  /proxy-from-env@1.1.0:
-    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
-    dev: false
-
   /punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}

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;
-}