Merge pull request #109 from kalvilabs/feat/branding-setting-cookie

✨ feat[frontend]: added cookie handler for branding setting and refactored authentication cookie for better naming convention

apps/admin/actions/cookie-destroy.ts → apps/admin/actions/auth-cookie.ts

@@ -1,13 +1,13 @@
 "use server";
 
 import { LOGOUT_URL } from "@/api-routes";
-import axios from "axios";
+import axios, { AxiosRequestHeaders } from "axios";
 import { revalidatePath } from "next/cache";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
 
-export async function cookieDestroyer() {
+export async function authCookieDestroy() {
   try {
     await axios.post(
       LOGOUT_URL,
@@ -17,15 +17,32 @@ export async function cookieDestroyer() {
       {
         headers: {
           Authorization: `Bearer ${cookies().get("Authorization")?.value}`,
-        },
+        } as AxiosRequestHeaders,
       }
     );
     cookies().delete("Authorization");
     cookies().delete("Refresh");
   } catch (e) {
-    // TODO: Handle error with a popup or message and prevent signout to prevent the token from being live
+    // TODO: Handle error with a popup or message and prevent sign out to prevent the token from being live
     console.error(e);
   }
   revalidatePath('/home/login')
   redirect("/home/login");
 }
+
+interface ILoginUserAction {
+  access: string;
+  refresh: string;
+}
+
+export async function authCookieSetter({ access, refresh }: ILoginUserAction) {
+  cookies().set("Authorization", access, {
+    httpOnly: true,
+    secure: true,
+  });
+  cookies().set("Refresh", refresh, {
+    httpOnly: true,
+    secure: true,
+  });
+  redirect("/admin/dashboard")
+}

apps/admin/actions/index.ts

@@ -1,2 +1,2 @@
-export * from './cookie-destroy'
-export * from './cookie-setter'
+export * from './auth-cookie'
+export * from './theme-cookie'

apps/admin/actions/theme-cookie.ts

@@ -0,0 +1,17 @@
+"use server";
+
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+
+const apiCall = async () : Promise<string> => {
+    // TODO: Call API to find the branding setting
+    return ""
+}
+export async function setBrandingCookie() {
+    const color : string = await apiCall()
+    cookies().set("BrandingColor", color);
+}
+
+export async function getBrandingCookie() {
+    return cookies().get("BrandingColor")
+}

apps/admin/app/admin/dashboard/_components/button.tsx

@@ -2,8 +2,8 @@
 
 import { Button } from "@repo/ui/partials";
 
-import { cookieDestroyer } from "@/actions";
+import { authCookieDestroy } from "@/actions";
 
 export function SignOutButton() {
-  return <Button onClick={() => cookieDestroyer()}>Sign Out</Button>;
+  return <Button onClick={() => authCookieDestroy()}>Sign Out</Button>;
 }

apps/admin/app/home/(auth)/login/_components/form.tsx

@@ -21,7 +21,7 @@ import {
   TLoginErrorResponse,
   TLoginSuccessResponse,
 } from "@/types";
-import { cookieSetter } from "@/actions";
+import { authCookieSetter } from "@/actions";
 import { formSchema, TFormSchema } from "./form-schema";
 
 export function LoginForm() {
@@ -40,7 +40,7 @@ export function LoginForm() {
         LOGIN_URL,
         form.getValues()
       );
-      await cookieSetter({
+      await authCookieSetter({
         access: response.data.token.access,
         refresh: response.data.token.refresh,
       });

apps/admin/app/home/(auth)/register/_components/form.tsx

@@ -14,7 +14,7 @@ import {
   TRegistrationErrorResponse,
   TRegistrationSuccessResponse,
 } from "@/types";
-import { cookieSetter } from "@/actions";
+import { authCookieSetter } from "@/actions";
 import { formSchema, TFormSchema } from "./form-schema";
 
 export function RegisterationForm() {
@@ -41,7 +41,7 @@ export function RegisterationForm() {
         REGISTER_URL,
         data
       );
-      cookieSetter({
+      authCookieSetter({
         access: response.data.token.access,
         refresh: response.data.token.refresh,
       });

apps/admin/components/github-signin.tsx

@@ -5,7 +5,7 @@ import { AuthProviderButton } from "@repo/ui/components";
 
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { cookieSetter } from "@/actions";
+import { authCookieSetter } from "@/actions";
 import axios from "axios";
 import { GITHUB_SIGN_IN_URL } from "@/api-routes";
 
@@ -20,7 +20,7 @@ export const GitHubSignInButton: FC<Props> = () => {
           code: credential,
         });
 
-        cookieSetter({
+        authCookieSetter({
           access: response.data.tokens.access,
           refresh: response.data.tokens.refresh,
         });

apps/admin/components/google-signin.tsx

@@ -9,7 +9,7 @@ import {
   TGoogleSignInErrorResponse,
   TGoogleSignInSuccessResponse,
 } from "@/types";
-import { cookieSetter } from "@/actions";
+import { authCookieSetter } from "@/actions";
 import { useRouter } from "next/navigation";
 
 export const GoogleSignInButton: FC = () => {
@@ -29,7 +29,7 @@ export const GoogleSignInButton: FC = () => {
           auth_token: credential,
         }
       );
-      cookieSetter({
+      authCookieSetter({
         access: response.data.tokens.access,
         refresh: response.data.tokens.refresh,
       });