Untangle frontend from token cookie management (#9)

Author: dheidemann

README.md

@@ -38,7 +38,7 @@ services:
 ### Required for Production environment
 | Key | Description | Example |
 | - | - | - |
-| `PUBLIC_URL` | Domain under which pepp is deployed | `https://stapel.example.com` |
+| `PUBLIC_URL` | Domain under which stapel is deployed | `https://stapel.example.com` |
 | `SMTP_HOST` | E-Mail provider | `smtp.example.com` |
 | `SMTP_USER` | The user to log into the SMTP Server | `alice@example.com` |
 | `SMTP_PASSWORD` | The password to log into the SMTP Server | - |
@@ -69,7 +69,7 @@ npm run dev
 ```bash
 cd server
 go generate ./...
-go run server.go
+ENV=Development go run server.go
 ```
 
 ## Contributions

frontend/components/providers/auth-provider.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { deleteCookie, getCookie, setCookie } from "@/lib/cookie";
 import {
   useIsActiveSessionQuery,
   useLogoutMutation,
@@ -27,51 +26,32 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   const router = useRouter();
 
   const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [token, setToken] = useState<string | undefined>();
 
-  const { error: sessionError, data: sessionData } = useIsActiveSessionQuery({
-    skip: !token,
-    variables: { token: token! },
-  });
+  const { data: sessionData, refetch: sessionRefetch } =
+    useIsActiveSessionQuery();
 
-  if (sessionError) {
-    toast.error(
-      `Bei der Überprüfung der Session ist ein Fehler aufgetreten: ${sessionError.message}`
-    );
-  }
+  useEffect(() => {
+    if (searchParams.get("l") === "1") {
+      router.push("/");
+      sessionRefetch();
+    }
+  }, [searchParams]);
 
   useEffect(() => {
     if (sessionData) {
       setIsAuthenticated(sessionData.isActiveSession);
-      if (sessionData.isActiveSession) setCookie("token", token!, 7);
     }
   }, [sessionData]);
 
-  useEffect(() => {
-    const tokenCookie = getCookie("token");
-    if (tokenCookie) {
-      setToken(tokenCookie);
-    }
-
-    const tokenSearchParam = searchParams.get("token");
-    if (tokenSearchParam) {
-      setToken(tokenSearchParam);
-      router.push("/");
-    }
-  }, [searchParams]);
-
   const [triggerLogout, { error: logoutError }] = useLogoutMutation();
 
   if (logoutError) {
     toast.error(`Beim abmelden ist ein Fehler aufgetreten: ${logoutError}`);
   }
 
   function logout() {
-    if (!token) return;
-    triggerLogout({ variables: { token: token } });
-    deleteCookie("token");
-    setToken(undefined);
-    setIsAuthenticated(false);
+    triggerLogout();
+    sessionRefetch()
   }
 
   return (

frontend/lib/gql/generated/graphql.ts

@@ -36,7 +36,7 @@ export type Mutation = {
   __typename: 'Mutation';
   createDeck: Scalars['String']['output'];
   deleteDeck: Scalars['String']['output'];
-  logout: Scalars['String']['output'];
+  logout: Scalars['Boolean']['output'];
   setValid: Scalars['String']['output'];
   updateDeck: Scalars['String']['output'];
 };
@@ -52,12 +52,6 @@ export type MutationDeleteDeckArgs = {
   hash: Scalars['String']['input'];
 };
 
-
-export type MutationLogoutArgs = {
-  token: Scalars['String']['input'];
-};
-
-
 export type MutationSetValidArgs = {
   hash: Scalars['String']['input'];
 };
@@ -92,11 +86,6 @@ export type QueryDecksArgs = {
   year?: InputMaybe<Scalars['Int']['input']>;
 };
 
-
-export type QueryIsActiveSessionArgs = {
-  token: Scalars['String']['input'];
-};
-
 export type CreateDeckMutationVariables = Exact<{
   meta: NewDeck;
   file: Scalars['Upload']['input'];
@@ -127,12 +116,10 @@ export type SetValidMutationVariables = Exact<{
 
 export type SetValidMutation = { setValid: string };
 
-export type LogoutMutationVariables = Exact<{
-  token: Scalars['String']['input'];
-}>;
+export type LogoutMutationVariables = Exact<{ [key: string]: never; }>;
 
 
-export type LogoutMutation = { logout: string };
+export type LogoutMutation = { logout: boolean };
 
 export type DecksQueryVariables = Exact<{
   search?: InputMaybe<Scalars['String']['input']>;
@@ -144,9 +131,7 @@ export type DecksQueryVariables = Exact<{
 
 export type DecksQuery = { decks: Array<{ __typename: 'Deck', subject: string, module: string, moduleAlt: string, examiners: string, language: string, semester: string, year: number, hash: string, fileType: string, isValid: boolean }> | null };
 
-export type IsActiveSessionQueryVariables = Exact<{
-  token: Scalars['String']['input'];
-}>;
+export type IsActiveSessionQueryVariables = Exact<{ [key: string]: never; }>;
 
 
 export type IsActiveSessionQuery = { isActiveSession: boolean };
@@ -177,7 +162,7 @@ export type CreateDeckMutationFn = typeof useCreateDeckMutation
  *   },
  * });
  */
-export function useCreateDeckMutation(baseOptions?: Apollo.MutationFunctionOptions<CreateDeckMutation, CreateDeckMutationVariables>) {
+export function useCreateDeckMutation(baseOptions?: Apollo.MutationHookOptions<CreateDeckMutation, CreateDeckMutationVariables>) {
         const options = {...defaultOptions, ...baseOptions}
         return Apollo.useMutation<CreateDeckMutation, CreateDeckMutationVariables>(CreateDeckDocument, options);
       }
@@ -279,8 +264,8 @@ export type SetValidMutationHookResult = ReturnType<typeof useSetValidMutation>;
 export type SetValidMutationResult = Apollo.MutationResult<SetValidMutation>;
 export type SetValidMutationOptions = Apollo.MutationFunctionOptions<SetValidMutation, SetValidMutationVariables>;
 export const LogoutDocument = gql`
-    mutation Logout($token: String!) {
-  logout(token: $token)
+    mutation Logout {
+  logout
 }
     `;
 export type LogoutMutationFn = typeof useLogoutMutation
@@ -298,7 +283,6 @@ export type LogoutMutationFn = typeof useLogoutMutation
  * @example
  * const [logoutMutation, { data, loading, error }] = useLogoutMutation({
  *   variables: {
- *      token: // value for 'token'
  *   },
  * });
  */
@@ -362,8 +346,8 @@ export type DecksLazyQueryHookResult = ReturnType<typeof useDecksLazyQuery>;
 export type DecksSuspenseQueryHookResult = ReturnType<typeof useDecksSuspenseQuery>;
 export type DecksQueryResult = Apollo.QueryResult<DecksQuery, DecksQueryVariables>;
 export const IsActiveSessionDocument = gql`
-    query IsActiveSession($token: String!) {
-  isActiveSession(token: $token)
+    query IsActiveSession {
+  isActiveSession
 }
     `;
 
@@ -379,11 +363,10 @@ export const IsActiveSessionDocument = gql`
  * @example
  * const { data, loading, error } = useIsActiveSessionQuery({
  *   variables: {
- *      token: // value for 'token'
  *   },
  * });
  */
-export function useIsActiveSessionQuery(baseOptions: Apollo.QueryHookOptions<IsActiveSessionQuery, IsActiveSessionQueryVariables> & ({ variables: IsActiveSessionQueryVariables; skip?: boolean; } | { skip: boolean; }) ) {
+export function useIsActiveSessionQuery(baseOptions?: Apollo.QueryHookOptions<IsActiveSessionQuery, IsActiveSessionQueryVariables>) {
         const options = {...defaultOptions, ...baseOptions}
         return Apollo.useQuery<IsActiveSessionQuery, IsActiveSessionQueryVariables>(IsActiveSessionDocument, options);
       }

frontend/lib/gql/mutations/session.graphql

@@ -1,3 +1,3 @@
-mutation Logout($token: String!) {
-  logout(token: $token)
+mutation Logout {
+  logout
 }

frontend/lib/gql/queries/session.graphql

@@ -1,3 +1,3 @@
-query IsActiveSession($token: String!) {
-  isActiveSession(token: $token)
+query IsActiveSession {
+  isActiveSession
 }

frontend/lib/graphql.ts

@@ -1,21 +1,12 @@
-import { ApolloClient, ApolloLink, InMemoryCache } from '@apollo/client';
-import UploadHttpLink from 'apollo-upload-client/UploadHttpLink.mjs';
-import { getCookie } from './cookie';
-
-const authLink = new ApolloLink((operation, forward) => {
-  const token = getCookie('token');
-  operation.setContext(({ headers = {} }) => ({
-    headers: { ...headers, TOKEN: token ?? '' },
-  }));
-  return forward(operation);
-});
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+import UploadHttpLink from "apollo-upload-client/UploadHttpLink.mjs";
 
 const uploadLink = new UploadHttpLink({
-  uri: '/graphql',
-  credentials: 'include',
+  uri: "/graphql",
+  credentials: "include",
 });
 
 export const client = new ApolloClient({
-  link: authLink.concat(uploadLink),
+  link: uploadLink,
   cache: new InMemoryCache(),
 });

frontend/package.json

@@ -1,12 +1,13 @@
 {
   "name": "cards",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build --turbopack",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
     "@apollo/client": "^4.0.7",