Road to 1.0

README.md

@@ -1,5 +1,7 @@
 # Nuxt Sanctum Auth
 
+## Disclaimer: This README is outdated and does not reflect the current state of the code in this repository. For the latest information, please refer to the codebase.
+
 [![npm version](https://badge.fury.io/js/nuxt-sanctum-auth.svg)](https://badge.fury.io/js/nuxt-sanctum-auth)
 
 This is a simple package for integrating Laravel Sanctum auth with Nuxt3.

package.json

@@ -34,7 +34,7 @@
     "@types/node": "^18.11.18",
     "autoprefixer": "^10.4.13",
     "changelogen": "^0.4.1",
-    "nuxt": "^3.0.0",
+    "nuxt": "^3.8.2",
     "postcss": "^8.4.21",
     "prettier": "^2.7.1",
     "tailwindcss": "^3.2.6"

playground/nuxt.config.ts

@@ -8,17 +8,14 @@ export default defineNuxtConfig({
     }
   },
 
-  routeRules: {
-    '/account/**': { ssr: false },
-    '/auth/**': { ssr: false }
-  },
-
   //@ts-ignore
   modules: [nuxtSanctumAuth, '@nuxtjs/tailwindcss'],
 
   nuxtSanctumAuth: {
     token: false, // set true to test jwt-token auth instead of cookie
     baseUrl: 'http://localhost:8000',
+    globalMiddleware: true,
+    redirectByDefault: false,
     endpoints: {
       csrf: '/sanctum/csrf-cookie',
       login: '/login',

playground/pages/account/index.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { definePageMeta, useAuth, useNuxtApp } from '#imports'
-definePageMeta({
-  middleware: ['auth']
-})
+import { useSanctumAuth, useRouter } from '#imports'
 
-const { $sanctumAuth } = useNuxtApp()
-const auth = useAuth()
-const logout = async () => {
-  await $sanctumAuth.logout()
+const { auth, logout } = useSanctumAuth()
+const router = useRouter()
+
+async function signOut() {
+  const { response, error } = await logout()
+  if (error) {
+    console.log(error._data)
+    return
+  }
+
+  console.log(response?._data)
+  router.push('/auth/login')
 }
 </script>
 
@@ -17,19 +22,21 @@ const logout = async () => {
   >
     <h1 class="text-xl font-bold">You are logged in</h1>
     <p class="mb-2">Page accessable only for authenticated users</p>
-    <code
-      class="block text-xs p-4 rounded bg-gray-100 border border-gray-200 mb-2"
-    >
-      <pre>{{ auth }}</pre>
-    </code>
+    <ClientOnly>
+      <code
+        class="block text-xs p-4 rounded bg-gray-100 border border-gray-200 mb-2"
+      >
+        <pre>{{ auth }}</pre>
+      </code>
+    </ClientOnly>
 
     <nuxt-link class="text-blue-500 underline" to="/">
       Go to index page
     </nuxt-link>
 
     <button
       type="button"
-      @click.prevent="logout"
+      @click.prevent="signOut"
       class="w-full block rounded bg-blue-500 uppercase text-white py-2"
     >
       log out

playground/pages/auth/login.vue

@@ -1,33 +1,39 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { definePageMeta, useNuxtApp } from '#imports'
+import { reactive, ref } from 'vue'
+import { definePageMeta, useSanctumAuth, useRouter } from '#imports'
 
 definePageMeta({
-  middleware: ['guest']
+  middleware: ['guest'],
+  auth: false
 })
 
-const form = ref({
+const { login } = useSanctumAuth()
+const router = useRouter()
+
+const form = reactive({
   email: '',
   password: ''
 })
-const error = ref('')
 
-const { $sanctumAuth } = useNuxtApp()
+const errors = ref<any>(null)
+async function signIn() {
+  const { response, error } = await login(form)
 
-const login = async () => {
-  try {
-    await $sanctumAuth.login(form.value)
-  } catch (e: any) {
-    console.log(e?.message)
-    error.value = e?.message
+  if (error) {
+    console.log(error._data)
+    errors.value = error._data
+    return
   }
+
+  console.log(response?._data)
+  router.push('/account')
 }
 </script>
 
 <template>
   <form
-    @submit.prevent="login"
-    class="flex flex-col p-4 rounded shadow space-y-4 bg-white min-w-[400px]"
+    @submit.prevent="signIn"
+    class="flex flex-col p-4 rounded shadow space-y-4 w-full bg-white max-w-[400px]"
   >
     <h1 class="text-2xl font-bold text-center">Login</h1>
     <div class="flex flex-col">
@@ -49,10 +55,11 @@ const login = async () => {
       />
     </div>
     <button class="w-full block rounded bg-blue-500 uppercase text-white py-2">
-      login
+      log in
     </button>
-    <div v-if="error" class="text-sm text-red-500">
-      {{ error }}
+
+    <div v-if="errors" class="text-sm text-red-500">
+      {{ errors }}
     </div>
   </form>
 </template>

playground/pages/index.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
-import { ref, onMounted, useNuxtApp, useAuth } from '#imports'
+import { ref, onMounted, useSanctumAuth } from '#imports'
 
-const { $sanctumAuth } = useNuxtApp()
 const loading = ref(true)
-const auth = useAuth()
+const { auth, logout } = useSanctumAuth()
 
-onMounted(async () => {
-  await $sanctumAuth.getUser()
+onMounted(() => {
   loading.value = false
 })
+
+async function signOut() {
+  const { response, error } = await logout()
+  if (error) {
+    console.log(error._data)
+    return
+  }
+
+  console.log(response?._data)
+}
 </script>
 
 <template>
@@ -41,6 +49,14 @@ onMounted(async () => {
         <nuxt-link class="text-blue-500 underline" to="/account">
           Go to account
         </nuxt-link>
+
+        <button
+          type="button"
+          @click.prevent="signOut"
+          class="w-full block mt-2 rounded bg-blue-500 uppercase text-white py-2"
+        >
+          log out
+        </button>
       </div>
     </template>
   </div>

src/module.ts

@@ -7,8 +7,10 @@ import {
 import { ModuleOptions } from './types'
 
 const defaults: ModuleOptions = {
-  token: false,
   baseUrl: 'http://localhost:8000',
+  token: false,
+  globalMiddleware: false,
+  redirectByDefault: false,
   endpoints: {
     csrf: '/sanctum/csrf-cookie',
     login: '/login',
@@ -39,9 +41,9 @@ export default defineNuxtModule<ModuleOptions>({
     addPlugin(resolve('./runtime/plugin'))
 
     addImports({
-      name: 'useAuth',
-      as: 'useAuth',
-      from: resolve('runtime/composables')
+      name: 'useSanctumAuth',
+      as: 'useSanctumAuth',
+      from: resolve('runtime/useSanctumAuth')
     })
   }
 })