authz & authn implement

Author: wickedev

schema/schema.graphql

@@ -19,15 +19,6 @@ directive @provides(fields: _FieldSet!) on FIELD_DEFINITION
 """Specifies required input field set from the base type for a resolver"""
 directive @requires(fields: _FieldSet!) on FIELD_DEFINITION
 
-type AuthResponse {
-  accessToken: String!
-  expiresIn: Long!
-  refreshExpiresIn: Long!
-  refreshToken: String!
-  scope: String!
-  tokenType: String!
-}
-
 type AuthResponseWithID {
   accessToken: String!
   expiresIn: Long!
@@ -43,18 +34,24 @@ enum Direction {
   DESC
 }
 
+type InvalidEmailOrPasswordError {
+  message: String!
+}
+
 """Local Date Time type"""
 scalar LocalDateTime
 
+union LoginResponse = AuthResponseWithID | InvalidEmailOrPasswordError
+
 """Long type"""
 scalar Long
 
 type Mutation {
-  login(email: String!, password: String!): AuthResponseWithID!
+  login(email: String!, password: String!): LoginResponse!
   postDelete(id: ID!): ID!
   postUpload(uploadedPost: UploadedPostInput!): UploadPost
-  refresh(token: String!): AuthResponse!
-  signUp(email: String!, name: String, password: String!): User!
+  refresh(token: String!): AuthResponseWithID!
+  signUp(email: String!, name: String, password: String!): SignUpResponse!
 }
 
 interface Node {
@@ -104,6 +101,8 @@ type Query {
   users(before: ID, last: Int): UserConnect!
 }
 
+union SignUpResponse = User | UserAlreadyExistError
+
 type UploadPost {
   post: PostEdge!
 }
@@ -122,6 +121,10 @@ type User implements Node {
   roles: [String!]!
 }
 
+type UserAlreadyExistError {
+  message: String!
+}
+
 type UserConnect {
   edges: [UserEdge!]!
   pageInfo: PageInfo!

src/components/Logout.tsx

@@ -1,13 +1,17 @@
+import { useRelayEnvironment } from "react-relay";
 import { useAuth } from "../store/AuthContext";
 
 export function Logout() {
+  const enviroment = useRelayEnvironment();
+
   const auth = useAuth();
 
-  return (
-    <button
-      onClick={auth.onLogout.bind(auth)}
-    >
-      Logout
-    </button>
-  );
+  const handleLogout = () => {
+    enviroment.commitUpdate((store) => {
+      store.getRoot().getLinkedRecord("myInfo")?.invalidateRecord()
+    });
+    auth.onLogout();
+  };
+
+  return <button onClick={handleLogout}>Logout</button>;
 }

src/components/Navbar.tsx

@@ -1,11 +1,11 @@
 import { useSnapshot } from "valtio";
 import { Link } from "yarr";
-import { useAuth } from "../store/AuthContext";
+import { useAuth, useAuthSnapshot } from "../store/AuthContext";
 import { Logout } from "./Logout";
 import { UserInfo } from "./UserInfo";
 
 export const Navbar = () => {
-  const auth = useSnapshot(useAuth());
+  const auth = useAuthSnapshot();
 
   return (
     <div className="sticky top-0 z-40 w-full">

src/components/Posts.tsx

@@ -21,13 +21,13 @@ export const postsFragment = graphql`
       type: "[OrderInput!]"
       defaultValue: [{ property: "id", direction: DESC }]
     }
-    search: { type: "String", defaultValue: null }
+    search: { type: "String", defaultValue: "" }
   )
   @refetchable(queryName: "PostsQuery") {
     posts(first: $first, after: $after, orderBy: $orderBy, search: $search)
       @connection(
         key: "HomePostConnectionFragment_posts"
-        filters: ["orderBy", "search"]
+        filters: ["search"]
       ) {
       __id
       edges {
@@ -52,17 +52,14 @@ export const Posts = ({ postsRef, search }: PostsProps) => {
 
   const searching = useMemo(
     () =>
-      debounce(
-        (search: string) => {
-          pagination.refetch({
-            first: 10,
-            after: null,
-            orderBy: [{ property: "id", direction: "DESC" }],
-            search: search,
-          });
-        },
-        300,
-      ),
+      debounce((search: string) => {
+        pagination.refetch({
+          first: 10,
+          after: null,
+          orderBy: [{ property: "id", direction: "DESC" }],
+          search: search,
+        });
+      }, 300),
     []
   );
 

src/entry-client.tsx

@@ -23,13 +23,13 @@ const router = createBrowserRouter({
 });
 
 const container = document.getElementById("app");
-/* ReactDOM.createRoot(container!!).render(
+ReactDOM.createRoot(container!!).render(
   <AppRoot router={router} relayEnvironment={relayEnvironment} auth={auth} />
-); */
-ReactDOM.hydrateRoot(
+);
+/* ReactDOM.hydrateRoot(
   container!!,
   <AppRoot router={router} relayEnvironment={relayEnvironment} auth={auth} />
-);
+); */
 /* ReactDOM.render(
   <AppRoot router={router} relayEnvironment={relayEnvironment} auth={auth} />,
   container

src/lib/request-context/ClientRequestContext.ts

@@ -6,22 +6,26 @@ import { MILLS_PER_SECOND, refresh, RequestContext } from "./RequestContext";
 export class ClientRequestContext implements RequestContext {
   isServer = false;
 
+  userId?: string;
   accessToken?: string;
   expiresIn?: number;
   refreshToken?: string;
   refreshExpiresIn?: number;
   refreshHandle?: NodeJS.Timeout;
 
   constructor() {
+    this.userId = Cookies.get("userId");
     this.accessToken = Cookies.get("accessToken");
     this.expiresIn = Number(Cookies.get("expiresIn"));
     this.refreshToken = Cookies.get("refreshToken");
     this.refreshExpiresIn = Number(Cookies.get("refreshExpiresIn"));
     const now = new Date().getTime();
 
     if (now > this.expiresIn * MILLS_PER_SECOND) {
+      this.userId = undefined
       this.accessToken = undefined;
       this.expiresIn = undefined;
+      Cookies.remove("userId");
       Cookies.remove("accessToken");
       Cookies.remove("expiresIn");
     }
@@ -47,6 +51,7 @@ export class ClientRequestContext implements RequestContext {
     authInfo: AuthInfo,
     relayEnvironment: RelayModernEnvironment
   ): void {
+    setCookie("userId", authInfo.userId, authInfo.expiresIn);
     setCookie("accessToken", authInfo.accessToken, authInfo.expiresIn);
     setCookie("expiresIn", authInfo.expiresIn, authInfo.expiresIn);
     setCookie("refreshToken", authInfo.refreshToken, authInfo.refreshExpiresIn);
@@ -56,18 +61,21 @@ export class ClientRequestContext implements RequestContext {
       authInfo.refreshExpiresIn
     );
 
+    this.userId = authInfo.userId;
     this.accessToken = authInfo.accessToken;
     this.expiresIn = authInfo.expiresIn;
     this.refreshToken = authInfo.refreshToken;
     this.refreshExpiresIn = authInfo.refreshExpiresIn;
   }
 
   onLogout(): void {
+    this.userId = undefined;
     this.accessToken = undefined;
     this.expiresIn = undefined;
     this.refreshToken = undefined;
     this.refreshExpiresIn = undefined;
 
+    Cookies.remove("userId");
     Cookies.remove("accessToken");
     Cookies.remove("expiresIn");
     Cookies.remove("refreshToken");
@@ -93,6 +101,8 @@ function setCookie(name: string, value: string | number, expiresSec: number) {
   const v = typeof value === "string" ? value : value.toString();
   Cookies.set(name, v, {
     expires: new Date(expiresSec * MILLS_PER_SECOND),
+    path: '/',
+    // httpOnly: true,
     secure: true,
     sameSite: "Strict",
   });

src/lib/request-context/RequestContext.ts

@@ -5,6 +5,8 @@ import { RequestContextRefreshMutation } from "./__generated__/RequestContextRef
 
 export interface RequestContext {
   isServer: boolean;
+
+  userId?: string;
   accessToken?: string;
   expiresIn?: number;
   refreshToken?: string;
@@ -37,6 +39,7 @@ export function refresh(
       mutation: graphql`
         mutation RequestContextRefreshMutation($token: String!) {
           refresh(token: $token) {
+            userId
             accessToken
             expiresIn
             refreshToken

src/lib/request-context/ServerRequestContext.ts

@@ -2,7 +2,7 @@ import { setCookie } from "h3";
 import type { ServerResponse } from "http";
 import RelayModernEnvironment from "relay-runtime/lib/store/RelayModernEnvironment";
 import { AuthInfo } from "../../store/Auth";
-import { refresh, RequestContext } from "./RequestContext";
+import { MILLS_PER_SECOND, refresh, RequestContext } from "./RequestContext";
 export class ServerRequestContext implements RequestContext {
   isServer = true;
 
@@ -11,6 +11,11 @@ export class ServerRequestContext implements RequestContext {
     readonly res: ServerResponse
   ) {}
 
+  get userId(): string | undefined {
+    return this.cookies["userId"];
+  }
+  set userId(value: string | undefined) {}
+
   get accessToken(): string | undefined {
     return this.cookies["accessToken"];
   }
@@ -37,6 +42,7 @@ export class ServerRequestContext implements RequestContext {
     authInfo: AuthInfo,
     relayEnvironment: RelayModernEnvironment
   ): void {
+    this.setCookie("userId", authInfo.userId, authInfo.expiresIn);
     this.setCookie("accessToken", authInfo.accessToken, authInfo.expiresIn);
     this.setCookie("expiresIn", authInfo.expiresIn, authInfo.expiresIn);
     this.setCookie(
@@ -59,7 +65,9 @@ export class ServerRequestContext implements RequestContext {
   setCookie(name: string, value: string | number, expireSec: number) {
     const v = typeof value === "string" ? value : value.toString();
     setCookie(this.res, name, v, {
-      expires: new Date(1_000),
+      expires: new Date(expireSec * MILLS_PER_SECOND),
+      path: "/",
+      // httpOnly: true,
       secure: true,
       sameSite: "strict",
     });

src/pages/Home.tsx

@@ -4,14 +4,13 @@ import {
   graphql,
   PreloadedQuery,
   useFragment,
-  usePreloadedQuery,
+  usePreloadedQuery
 } from "react-relay";
-import { useSnapshot } from "valtio";
 import { Link, RouteProps } from "yarr";
 import { Posts, postsFragment } from "../components/Posts";
 import { Progress } from "../components/Progress";
 import { PostsFragment_query$key } from "../components/__generated__/PostsFragment_query.graphql";
-import { useAuth } from "../store/AuthContext";
+import { useAuthSnapshot } from "../store/AuthContext";
 import { HomePostsQuery } from "./__generated__/HomePostsQuery.graphql";
 
 export interface HomePageProps extends RouteProps<"/"> {
@@ -26,7 +25,7 @@ export const homePostsQuery = graphql`
 `;
 
 export default function HomePage({ preloaded }: HomePageProps) {
-  const auth = useSnapshot(useAuth());
+  const auth = useAuthSnapshot();
 
   const [search, setSearch] = useState("");
 

src/pages/Login.tsx

@@ -29,12 +29,18 @@ export default function LoginPage() {
   const [commit, isInFlight] = useMutation<LoginMutation>(graphql`
     mutation LoginMutation($email: String!, $password: String!) {
       login(email: $email, password: $password) {
-        userId
-        accessToken
-        expiresIn
-        refreshToken
-        refreshExpiresIn
-        scope
+        __typename
+        ... on AuthResponseWithID {
+          userId
+          accessToken
+          expiresIn
+          refreshToken
+          refreshExpiresIn
+          scope
+        }
+        ... on InvalidEmailOrPasswordError {
+          message
+        }
       }
     }
   `);
@@ -54,19 +60,19 @@ export default function LoginPage() {
         ...data,
       },
       onCompleted: (response, errors) => {
-        environment.commitUpdate((store) => {
-          store.get(response.login.userId)?.invalidateRecord();
-        });
-        auth.onLoginSuccess(response.login, environment);
-        navigation.push("/");
-      },
-      onError: (error) => {
-        setError("password", {
-          message: (error as any).source.errors
-            .flatMap((e: any) => Object.values(e.extensions))
-            .map((e: any) => e.message)
-            .join(", "),
-        });
+        if (response.login.__typename === "AuthResponseWithID") {
+          environment.commitUpdate((store) => {
+            store.getRoot().getLinkedRecord("myInfo")?.invalidateRecord();
+          });
+          auth.onLoginSuccess(response.login, environment);
+          navigation.push("/");
+        } else if (
+          response.login.__typename === "InvalidEmailOrPasswordError"
+        ) {
+          setError("password", {
+            message: response.login.message,
+          });
+        }
       },
     });
   };