feat: Added locally unprotected route and API routes pages (#11)

components/Navbar.vue

@@ -22,6 +22,22 @@
               Globally Protected
             </nuxt-link>
           </li>
+          <li>
+            <nuxt-link
+                href="/protected/locally"
+                class="block py-2 pr-4 pl-3 mx-2 rounded md:border-0 md:p-0 text-gray-400 md:hover:text-white hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
+            >
+              Locally Unprotected
+            </nuxt-link>
+          </li>
+          <li>
+            <nuxt-link
+                href="/api-routes"
+                class="block py-2 pr-4 pl-3 mx-2 rounded md:border-0 md:p-0 text-gray-400 md:hover:text-white hover:bg-gray-700 hover:text-white md:hover:bg-transparent"
+            >
+              API Routes
+            </nuxt-link>
+          </li>
           <li class="hidden md:block border-l-2 border-gray-700" />
           <li class="flex items-center ml-2 md:space-x-4">
             <a

components/api/APITableRow.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+export default {
+  props: {
+    route: String,
+    method: String,
+    link: String,
+  }
+}
+</script>
+
+<template>
+  <tr class="bg-gray-800 border-gray-700">
+    <th scope="row" class="py-4 px-6 font-medium whitespace-nowrap text-white">
+      {{ route }}
+    </th>
+    <td class="py-4 px-6 uppercase">
+      {{ method }}
+    </td>
+    <td class="py-4 px-6">
+      <nuxt-link :href="link" target="_blank">
+        View Route
+        <i class="fa fa-external-link" />
+      </nuxt-link>
+    </td>
+  </tr>
+</template>

pages/api-routes.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="max-w-5xl mx-auto mt-5 px-5">
+    <div class="overflow-x-auto relative rounded">
+      <table class="w-full text-sm text-left text-gray-400">
+        <thead class="text-xs uppercase bg-gray-700 text-gray-400">
+        <tr>
+          <th scope="col" class="py-3 px-6">
+            Route
+          </th>
+          <th scope="col" class="py-3 px-6">
+            Method
+          </th>
+          <th scope="col" class="py-3 px-6">
+            Link
+          </th>
+        </tr>
+        </thead>
+        <tbody>
+          <APITableRow
+              route="/session"
+              method="get"
+              link="/api/auth/session"
+          />
+          <APITableRow
+              route="/csrf"
+              method="get"
+              link="/api/auth/csrf"
+          />
+          <APITableRow
+              route="/providers"
+              method="get"
+              link="/api/auth/providers"
+          />
+          <APITableRow
+            route="/signin"
+            method="get"
+            link="/api/auth/signin"
+          />
+          <APITableRow
+              route="/signin/:provider"
+              method="post"
+              link="/api/auth/signin/github"
+          />
+          <APITableRow
+              route="/callback/:provider"
+              method="get & post"
+              link="/api/auth/callback/github"
+          />
+          <APITableRow
+              route="/signout"
+              method="get & post"
+              link="/api/auth/signout"
+          />
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({ auth: false })
+</script>

pages/protected/locally.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="text-center mt-10">
+    <h1 class="text-2xl font-bold">I am publicly available!</h1>
+    <h3>The global protecting is disabled via <a href="https://github.com/sidebase/nuxt-auth#disabling-the-global-middleware-locally" target="_blank">local middleware</a>.</h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({ auth: false })
+</script>
+
+<style scoped>
+a {
+  @apply text-green-600 underline hover:text-green-500;
+}
+</style>