chore(release): v1.0.6

Add redirect_uri in logout route

CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+
+## v1.0.6
+
+## v1.0.5
+
+## v1.0.4
+
+## v1.0.3
+
+## v1.0.2
+
+## v1.0.0
+
+Initial Release

README.md

@@ -1,47 +1,67 @@
-# @bitinflow/nuxt-oauth
+# 🔒 @bitinflow/nuxt-oauth
 
-[![npm version][npm-version-src]][npm-version-href]
+**@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.
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-
-> My new Nuxt module
 
 - [✨  Release Notes](/CHANGELOG.md)
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
 
 ## Features
 
-<!-- Highlight some of the features your module provide here -->
+- 📦 Simple OAuth 2 Implicit Grant authentication
-- ⛰ &nbsp;Foo
+- 📦 PKCE Support (planned)
-- 🚠 &nbsp;Bar
+- 📦 Intended to be used with laravel-passport
-- 🌲 &nbsp;Baz
+- 📦 Single OAuth provider support (currently)
 
 ## Quick Setup
 
-1. Add `my-module` dependency to your project
+1. Add `@bitinflow/nuxt-oauth` dependency to your project
 
 ```bash
 # Using pnpm
-pnpm add -D my-module
+pnpm add -D @bitinflow/nuxt-oauth
 
 # Using yarn
-yarn add --dev my-module
+yarn add --dev @bitinflow/nuxt-oauth
 
 # Using npm
-npm install --save-dev my-module
+npm install --save-dev @bitinflow/nuxt-oauth
 ```
 
-2. Add `my-module` to the `modules` section of `nuxt.config.ts`
+2. Add `@bitinflow/nuxt-oauth` to the `modules` section of `nuxt.config.ts` and disable `ssr`.
+   
+Or alternatively disable `ssr` via `routeRules`, only for pages where `auth` or `guest` middlewares are needed. Typically account section and login page.
 
 ```js
 export default defineNuxtConfig({
   modules: [
-    'my-module'
+    '@bitinflow/nuxt-oauth'
-  ]
+  ],
+
+  ssr: false,
+  // or
+  routeRules: {
+    '/account/**': { ssr: false },
+    '/auth/**': { ssr: false }
+  },
+
+  oauth: {
+    redirect: {
+      login: '/login',
+      logout: '/',
+      callback: '/login',
+      home: '/home'
+    },
+    endpoints: {
+      authorization: 'https://example.com/v1/oauth/authorization',
+      userInfo: `https://example.com/api/users/me`,
+      logout: 'https://example.com/oauth/logout'
+    },
+    clientId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
+    scope: ['user:read']
+  },
 })
 ```
 
-That's it! You can now use My Module in your Nuxt app ✨
+That's it! You can now use @bitinflow/nuxt-oauth in your Nuxt app ✨
 
 ## Development
 
@@ -68,13 +88,3 @@ npm run test:watch
 # Release new version
 npm run release
 ```
-
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/my-module
-
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/my-module
-
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/my-module

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.1",
+  "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/nuxt.config.ts

@@ -1,5 +1,8 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
+
+  ssr: false,
+
   oauth: {
     redirect: {
       login: '/login/', // sandbox appends / at the end of url

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('/')
+    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 hashParams = new URLSearchParams(to.hash.substring(1))
-        const token = params.get('access_token') as string;
-        const tokenType = params.get('token_type') as string;
-        const expires = params.get('expires_in') as string;
 
-        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)
       }