chore(release): v1.0.6

Add redirect_uri in logout route

CHANGELOG.md

@@ -1,6 +1,14 @@
 # Changelog
 
 
+## v1.0.6
+
+## v1.0.5
+
+## v1.0.4
+
+## v1.0.3
+
 ## v1.0.2
 
 ## v1.0.0

README.md

@@ -1,14 +1,15 @@
-# @bitinflow/nuxt-oauth
+# 🔒 @bitinflow/nuxt-oauth
 
-> Nuxt module for OAuth2 authentication
+**@bitinflow/nuxt-oauth** is a Nuxt 3 Module that provides a simple OAuth 2 implementation for static site nuxt applications. It uses an Implicit Grant where no backend code is required, and plans to support PKCE as well. This package is intended to be used with laravel-passport, allowing users to interact with their first-party API using their own OAuth provider. Currently, it does not support multiple OAuth providers. With **@bitinflow/nuxt-oauth**, developers can quickly and easily implement secure OAuth authentication in their Nuxt applications.
 
 - [✨  Release Notes](/CHANGELOG.md)
 
 ## Features
 
-- 📦 OAuth2 authentication
-- 📦 Supports only one OAuth2 provider
-- 📦 Supports only implicit flow
+- 📦 Simple OAuth 2 Implicit Grant authentication
+- 📦 PKCE Support (planned)
+- 📦 Intended to be used with laravel-passport
+- 📦 Single OAuth provider support (currently)
 
 ## Quick Setup
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bitinflow/nuxt-oauth",
-  "version": "1.0.0",
+  "version": "1.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bitinflow/nuxt-oauth",
-      "version": "1.0.0",
+      "version": "1.0.5",
       "license": "MIT",
       "dependencies": {
         "@nuxt/kit": "^3.2.2",
@@ -17,6 +17,7 @@
         "@nuxt/module-builder": "^0.2.1",
         "@nuxt/schema": "^3.2.2",
         "@nuxt/test-utils": "^3.2.2",
+        "axios": "^1.3.5",
         "changelogen": "^0.4.1",
         "eslint": "^8.34.0",
         "nuxt": "^3.2.2",
@@ -2639,6 +2640,12 @@
       "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.13",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
@@ -2672,6 +2679,17 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.5.tgz",
+      "integrity": "sha512-glL/PvG/E+xCWwV8S6nCHcrfg1exGx7vxyUIivIA1iL7BIh6bePylCfVHwp6k13ao7SATxB6imau2kqY+I67kw==",
+      "dev": true,
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3338,6 +3356,18 @@
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz",
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -3703,6 +3733,15 @@
       "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.2.tgz",
       "integrity": "sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ=="
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -4508,6 +4547,20 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dev": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/formdata-polyfill": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
@@ -5862,6 +5915,27 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -7337,6 +7411,12 @@
       "integrity": "sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==",
       "dev": true
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitinflow/nuxt-oauth",
-  "version": "1.0.2",
+  "version": "1.0.6",
   "description": "Nuxt 3 OAuth Module",
   "license": "MIT",
   "type": "module",
@@ -35,6 +35,7 @@
     "@nuxt/module-builder": "^0.2.1",
     "@nuxt/schema": "^3.2.2",
     "@nuxt/test-utils": "^3.2.2",
+    "axios": "^1.3.5",
     "changelogen": "^0.4.1",
     "eslint": "^8.34.0",
     "nuxt": "^3.2.2",

playground/pages/home.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {useAuth} from "#imports";
+import {useAuth, useNuxtApp} from "#imports";
 
 const {user, signOut} = await useAuth();
 
@@ -7,6 +7,15 @@ definePageMeta({
   middleware: ["auth"]
 })
 
+const { $api } = useNuxtApp()
+
+$api.get('users/@me')
+  .then((response: any) => {
+    console.log(response.data)
+  })
+  .catch((error: any) => {
+    console.log(error)
+  })
 </script>
 
 <template>

playground/plugins/axios.ts

@@ -0,0 +1,28 @@
+import axios from "axios";
+import {useAuth} from "#imports";
+import {defineNuxtPlugin} from '#app';
+import {watch} from 'vue';
+
+export default defineNuxtPlugin(async () => {
+  const {bearerToken, accessToken} = await useAuth();
+
+  const api = axios.create({
+    baseURL: 'https://id.stream.tv/api/',
+    headers: {
+      common: {
+        'Authorization': bearerToken(),
+      },
+    },
+  });
+
+  watch(accessToken, () => {
+    console.log('access token rotated')
+    api.defaults.headers.common['Authorization'] = bearerToken();
+  });
+
+  return {
+    provide: {
+      api: api,
+    },
+  };
+});

src/module.ts

@@ -12,7 +12,7 @@ export interface ModuleOptions {
   endpoints: {
     authorization: string,
     userInfo: string,
-    logout: string
+    logout: string | null
   },
   clientId: string,
   scope: string[]
@@ -28,7 +28,7 @@ const defaults: ModuleOptions = {
   endpoints: {
     authorization: 'https://accounts.bitinflow.com/oauth/authorize',
     userInfo: `https://accounts.bitinflow.com/api/v3/user`,
-    logout: 'https://accounts.bitinflow.com/logout'
+    logout: null,
   },
   clientId: 'please-set-client-id',
   scope: ['user:read']

src/runtime/composables/useAuth.ts

@@ -5,12 +5,15 @@ declare interface ComposableOptions {
   fetchUserOnInitialization: boolean
 }
 
+let user: CookieRef<any>;
+let accessToken: CookieRef<any>;
+
 export default async (options: ComposableOptions = {
   fetchUserOnInitialization: false
 }) => {
-  const user: CookieRef<any> = useCookie('oauth_user')
-  const accessToken: CookieRef<any> = useCookie('oauth_access_token')
   const authConfig = useRuntimeConfig().public.oauth as ModuleOptions;
+  if (user == null) user = useCookie('oauth_user');
+  if (accessToken == null) accessToken = useCookie('oauth_access_token');
 
   const fetchUser = async () => {
     try {
@@ -45,10 +48,20 @@ export default async (options: ComposableOptions = {
     accessToken.value = null;
     user.value = null;
 
-    return navigateTo(authConfig.endpoints.logout || authConfig.redirect.logout)
+    if (authConfig.endpoints.logout) {
+      // create oauth logout url
+      const params = new URLSearchParams({
+        client_id: authConfig.clientId,
+        redirect_uri: window.location.origin + authConfig.redirect.logout
+      })
+
+      window.location.href = `${authConfig.endpoints.logout}?${params.toString()}`
+    }
+
+    return navigateTo(authConfig.redirect.logout)
   }
 
-  const setBearer = async (token: string, tokenType: string, expires: number) => {
+  const setBearerToken = async (token: string, tokenType: string, expires: number) => {
     accessToken.value = {token, tokenType, expiresAt: Date.now() + expires * 1000};
     await fetchUser()
   }
@@ -58,11 +71,19 @@ export default async (options: ComposableOptions = {
     await fetchUser()
   }
 
+  const bearerToken = () => {
+    return accessToken.value
+      ? `${accessToken.value.tokenType} ${accessToken.value.token}`
+      : null;
+  }
+
   return {
     user,
     signIn,
     signOut,
-    setBearer,
+    setBearerToken,
+    bearerToken,
+    accessToken,
     authConfig
   }
 }

src/runtime/plugin.ts

@@ -3,17 +3,22 @@ import useAuth from "./composables/useAuth"
 
 export default defineNuxtPlugin(() => {
   addRouteMiddleware('auth', async (to) => {
-    const {user, authConfig, setBearer} = await useAuth()
+    const {user, authConfig, setBearerToken} = await useAuth()
 
     if (to.path === authConfig.redirect.callback) {
-      const params = new URLSearchParams(to.hash.substring(1))
+      const queryParams = new URLSearchParams(to.query.toString());
+      if (queryParams.has('error')) {
+        return navigateTo(authConfig.redirect.login)
+      }
 
-      if (params.has('access_token')) {
-        const token = params.get('access_token') as string;
-        const tokenType = params.get('token_type') as string;
-        const expires = params.get('expires_in') as string;
+      const hashParams = new URLSearchParams(to.hash.substring(1))
 
-        await setBearer(token, tokenType, parseInt(expires));
+      if (hashParams.has('access_token')) {
+        const token = hashParams.get('access_token') as string;
+        const tokenType = hashParams.get('token_type') as string;
+        const expires = hashParams.get('expires_in') as string;
+
+        await setBearerToken(token, tokenType, parseInt(expires));
         return navigateTo(authConfig.redirect.home)
       }