create-fe-boilerplate 0.3.0 → 0.3.1

package/bin/index.js

@@ -39,7 +39,8 @@ async function run() {
       type: "list",
       name: "api",
       message: "Choose API layer:",
-      choices: ["axios", "rtk"],
+      choices: (answers) =>
+        answers.framework === "next" ? ["axios"] : ["axios", "rtk"],
     },
     {
       type: "input",
@@ -49,6 +50,9 @@ async function run() {
     },
   ]);
 
+  const apiChoices =
+    answers.framework === "next" ? ["axios"] : ["axios", "rtk"];
+
   /* ---------------- VALIDATE PROJECT NAME ---------------- */
 
   const validation = validatePkgName(answers.projectName);
@@ -67,7 +71,7 @@ async function run() {
     answers.framework,
     answers.language,
     answers.style,
-    answers.api
+    apiChoices.includes(answers.api) ? answers.api : "axios"
   );
 
   if (!fs.existsSync(templatePath)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fe-boilerplate",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "CLI to scaffold React boilerplates with authentication, OTP, Tailwind and Axios",
   "type": "module",
   "bin": {

package/templates/next/ts/tailwind/axios/src/api/axios.ts

@@ -1,9 +1,10 @@
 import axios from "axios";
 
-const BASE_URL = process.env.NEXT_PUBLIC_API_HOST;
-
 export const axiosApi = axios.create({
-  baseURL: BASE_URL,
+  baseURL: process.env.NEXT_PUBLIC_API_HOST,
+  headers: {
+    "Content-Type": "application/json",
+  },
 });
 
 axiosApi.interceptors.request.use((config) => {
@@ -15,3 +16,16 @@ axiosApi.interceptors.request.use((config) => {
   }
   return config;
 });
+
+axiosApi.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error?.response?.status === 401) {
+      if (typeof window !== "undefined") {
+        localStorage.removeItem("token");
+        window.location.href = "/login";
+      }
+    }
+    return Promise.reject(error);
+  }
+);

package/templates/next/ts/tailwind/axios/src/components/VerifyOtpModal.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { axiosApi } from "@/api/axios";
 import { useState } from "react";
 
 interface VerifyOtpModalProps {
@@ -20,9 +21,12 @@ export default function VerifyOtpModal({
   if (!isOpen) return null;
 
   const handleVerify = async () => {
-    // 🔴 replace with axios call later
-    const fakeToken = "dummy-token";
-    onSuccess(fakeToken);
+    // const res = await axiosApi.post("/auth/verify-otp", {
+    //   refId,
+    //   otp,
+    // });
+
+    onSuccess("dummy Token");
   };
 
   return (