Change ci command

Update package.yml

.github/workflows/package.yml

@@ -0,0 +1,22 @@
+name: Node.js Package
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@bitinflow'
+      - run: yarn install
+      - run: yarn ci
+      - run: yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

CHANGELOG.md

@@ -1,14 +1,32 @@
 # Changelog
 
 
-## v1.0.5
+## v2.0.2
+
+## v2.0.1
+
+Typo fixes in the GitHub/NPM repo
+
+## v2.0.0
+
+Support for Authorization Code Grant with PKCE
+
+## v1.0.5 - v1.0.6
+
+Fix for CookieRef when using watch(...)
 
 ## v1.0.4
 
+Minor fixes
+
 ## v1.0.3
 
+Minor fixes
+
 ## v1.0.2
 
+Minor fixes
+
 ## v1.0.0
 
 Initial Release

README.md

@@ -1,17 +1,28 @@
-# @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 for which no backend code is required. It uses the recommended Authorization Code Grant with PKCE by
+default and supports Implicit Grant Tokens 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
+- 📦 Authorization Code Grant with PKCE (default)
+- 📦 Simple OAuth 2 Implicit Grant Token
+  authentication ([not recommended](https://datatracker.ietf.org/doc/html/draft-ietf-oauth-security-topics))
+- 📦 Intended to be used with laravel-passport
+- 📦 Single OAuth provider support (currently)
 
 ## Quick Setup
 
+> **Note:** Starting with **@bitinflow/nuxt-oauth** v2.0.0, the default response type is `code`. If you want to use the
+> `token` response type, you need to set it explicitly in the configuration.
+
 1. Add `@bitinflow/nuxt-oauth` dependency to your project
 
 ```bash
@@ -27,7 +38,8 @@ npm install --save-dev @bitinflow/nuxt-oauth
 
 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.
+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({
@@ -38,28 +50,40 @@ export default defineNuxtConfig({
   ssr: false,
   // or
   routeRules: {
-    '/account/**': { ssr: false },
-    '/auth/**': { ssr: false }
+    '/dashboard/**': {ssr: false},
+    '/whatever/**': {ssr: false}
   },
 
+  // using code response type (default)
   oauth: {
-    redirect: {
-      login: '/login',
-      logout: '/',
-      callback: '/login',
-      home: '/home'
-    },
     endpoints: {
-      authorization: 'https://example.com/v1/oauth/authorization',
-      userInfo: `https://example.com/api/users/me`,
+      authorization: 'https://example.com/oauth/authorize',
+      token: 'https://example.com/oauth/token',
+      userInfo: 'https://example.com/api/users/me',
       logout: 'https://example.com/oauth/logout'
     },
     clientId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
     scope: ['user:read']
   },
+
+  // using token response type (not recommended)
+  oauth: {
+    endpoints: {
+      authorization: 'https://example.com/oauth/authorize',
+      userInfo: 'https://example.com/api/users/me',
+      logout: 'https://example.com/oauth/logout'
+    },
+    clientId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
+    responseType: 'token',
+    scope: ['user:read']
+  },
 })
 ```
 
+This will be your callback url (host is determined by `window.location.origin`):
+
+- Callback: `http://localhost:3000/login`
+
 That's it! You can now use @bitinflow/nuxt-oauth in your Nuxt app ✨
 
 ## Development

UPGRADE.md

@@ -0,0 +1,13 @@
+# Upgrade Guide
+
+## General Notes
+
+## Upgrading To 2.0 From 1.x
+
+### Changing default response type to `code`
+
+OAuth 2 Implicit Grant Token authentication
+is [not recommended](https://datatracker.ietf.org/doc/html/draft-ietf-oauth-security-topics) anymore. If you still
+want to use the `token` response type, you need to set it explicitly with `responseType: 'token'` in the
+`oauth` configuration. Otherwise, you will use Authorization Code Grant with PKCE by default.
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitinflow/nuxt-oauth",
-  "version": "1.0.5",
+  "version": "2.0.3",
   "description": "Nuxt 3 OAuth Module",
   "license": "MIT",
   "type": "module",
@@ -21,7 +21,9 @@
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish --access public && git push --follow-tags",
+    "ci": "npm run lint && npm run dev:prepare && npm run test && npm run prepack",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && git push --follow-tags",
+    "push": "npm publish --access public",
     "lint": "eslint .",
     "test": "vitest run",
     "test:watch": "vitest watch"
@@ -35,6 +37,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

@@ -5,17 +5,9 @@ export default defineNuxtConfig({
 
   oauth: {
     redirect: {
-      login: '/login/', // sandbox appends / at the end of url
-      logout: '/',
-      callback: '/login/', // sandbox appends / at the end of url
       home: '/home'
     },
-    endpoints: {
-      authorization: 'https://api.sandbox.own3d.pro/v1/oauth/authorization',
-      userInfo: `https://id.stream.tv/api/users/@me`,
-      logout: 'https://id.stream.tv/oauth/token'
-    },
-    clientId: '90a951d1-ea50-4fda-8c4d-275b81f7d219',
-    scope: ['user:read', 'connections']
+    clientId: '98e1cb74-125a-4d60-b686-02c2f0c87521',
+    scope: ['user:read']
   },
 })

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,11 +7,20 @@ definePageMeta({
   middleware: ["auth"]
 })
 
+const { $api } = useNuxtApp()
+
+$api.get('user')
+  .then((response: any) => {
+    console.log(response.data)
+  })
+  .catch((error: any) => {
+    console.log(error)
+  })
 </script>
 
 <template>
   <div v-if="user">
-    Hello {{ user.name }}
+    Hello {{ user.data.first_name }}
 
     <button @click="signOut">
       Sign Out

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://accounts.bitinflow.com/api/v3/',
+    headers: {
+      common: {
+        'Authorization': bearerToken(),
+      },
+    },
+  });
+
+  watch(accessToken, () => {
+    console.log('access token rotated')
+    api.defaults.headers.common['Authorization'] = bearerToken();
+  });
+
+  return {
+    provide: {
+      api: api,
+    },
+  };
+});

src/module.ts

@@ -3,19 +3,25 @@ import defu from "defu";
 
 // Module options TypeScript interface definition
 export interface ModuleOptions {
-  redirect: {
-    login: string,
-    logout: string,
-    callback: string,
-    home: string
+  redirect?: {
+    login?: string,
+    logout?: string,
+    callback?: string,
+    home?: string
   },
-  endpoints: {
-    authorization: string,
-    userInfo: string,
-    logout: string | null
+  endpoints?: {
+    authorization?: string,
+    token?: string,
+    userInfo?: string,
+    logout?: string | null
   },
-  clientId: string,
-  scope: string[]
+  refreshToken?: {
+    maxAge: number,
+  }
+  clientId?: string,
+  responseType?: 'token' | 'code',
+  prompt?: '' | 'none' | 'login' | 'consent',
+  scope?: string[]
 }
 
 const defaults: ModuleOptions = {
@@ -27,11 +33,17 @@ const defaults: ModuleOptions = {
   },
   endpoints: {
     authorization: 'https://accounts.bitinflow.com/oauth/authorize',
-    userInfo: `https://accounts.bitinflow.com/api/v3/user`,
+    token: 'https://accounts.bitinflow.com/oauth/token',
+    userInfo: 'https://accounts.bitinflow.com/api/v3/user',
     logout: null,
   },
+  refreshToken: {
+    maxAge: 60 * 60 * 24 * 30,
+  },
   clientId: 'please-set-client-id',
-  scope: ['user:read']
+  responseType: 'code',
+  prompt: '',
+  scope: []
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -40,7 +52,7 @@ export default defineNuxtModule<ModuleOptions>({
     configKey: 'oauth'
   },
   defaults,
-  setup (moduleOptions, nuxt) {
+  setup(moduleOptions, nuxt) {
     const resolver = createResolver(import.meta.url)
 
     const options = defu(moduleOptions, {
@@ -48,7 +60,7 @@ export default defineNuxtModule<ModuleOptions>({
     })
 
     // Set up runtime configuration
-    nuxt.options.runtimeConfig = nuxt.options.runtimeConfig || { public: {} }
+    nuxt.options.runtimeConfig = nuxt.options.runtimeConfig || {public: {}}
     nuxt.options.runtimeConfig.oauth = defu(nuxt.options.runtimeConfig.oauth, {
       ...options
     })

src/runtime/composables/useAuth.ts

@@ -1,18 +1,24 @@
 import {CookieRef, navigateTo, useCookie, useRuntimeConfig} from "#app";
 import {ModuleOptions} from "../../module";
+import {generateRandomString, getChallengeFromVerifier} from "../support";
 
 declare interface ComposableOptions {
   fetchUserOnInitialization: boolean
 }
 
+let user: CookieRef<any>;
+let accessToken: CookieRef<any>;
+let refreshToken: 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');
+  if (refreshToken == null) refreshToken = useCookie('oauth_refresh_token');
 
-  const fetchUser = async () => {
+  const fetchUser = async (): Promise<void> => {
     try {
       const response = await fetch(authConfig.endpoints.userInfo, {
         headers: {
@@ -29,15 +35,28 @@ export default async (options: ComposableOptions = {
     }
   }
 
-  const signIn = async () => {
+  const signIn = async (): Promise<void> => {
+    const state = useCookie<string>('oauth_state');
+    state.value = generateRandomString();
+
     // create oauth authorization url
     const params = new URLSearchParams({
       client_id: authConfig.clientId,
       redirect_uri: window.location.origin + authConfig.redirect.callback,
-      response_type: 'token',
-      scope: authConfig.scope.join(' ')
+      response_type: authConfig.responseType,
+      scope: authConfig.scope.join(' '),
+      state: state.value,
+      prompt: authConfig.prompt
     })
 
+    if (authConfig.responseType === 'code') {
+      const codeVerifier = useCookie<string>('oauth_code_verifier');
+      codeVerifier.value = generateRandomString();
+
+      params.set('code_challenge', await getChallengeFromVerifier(codeVerifier.value))
+      params.set('code_challenge_method', 'S256')
+    }
+
     window.location.href = `${authConfig.endpoints.authorization}?${params.toString()}`
   };
 
@@ -55,14 +74,18 @@ export default async (options: ComposableOptions = {
       window.location.href = `${authConfig.endpoints.logout}?${params.toString()}`
     }
 
-    return navigateTo(authConfig.redirect.logout)
+    return navigateTo(authConfig.redirect.logout, { external: true })
   }
 
-  const setBearerToken = async (token: string, tokenType: string, expires: number) => {
+  const setBearerToken = async (token: string, tokenType: string, expires: number): Promise<void> => {
     accessToken.value = {token, tokenType, expiresAt: Date.now() + expires * 1000};
     await fetchUser()
   }
 
+  const setRefreshToken = async (token: string, tokenType: string, expires: number): Promise<void> => {
+    refreshToken.value = {token, tokenType, expiresAt: Date.now() + expires * 1000};
+  }
+
   // Initialize the user if the option is set to true
   if (options.fetchUserOnInitialization) {
     await fetchUser()
@@ -79,8 +102,10 @@ export default async (options: ComposableOptions = {
     signIn,
     signOut,
     setBearerToken,
+    setRefreshToken,
     bearerToken,
     accessToken,
+    refreshToken,
     authConfig
   }
 }

src/runtime/plugin.ts

@@ -1,32 +1,98 @@
-import {addRouteMiddleware, defineNuxtPlugin, navigateTo} from '#app'
+import {addRouteMiddleware, defineNuxtPlugin, navigateTo, useCookie} from '#app'
 import useAuth from "./composables/useAuth"
+import {RouteLocationNormalized} from "vue-router";
+import {ModuleOptions} from "../module";
+
+interface AccessToken {
+  access_token: string,
+  token_type: string,
+  expires_in: number,
+  refresh_token: string
+  scope: string
+}
 
 export default defineNuxtPlugin(() => {
-  addRouteMiddleware('auth', async (to) => {
-    const {user, authConfig, setBearerToken} = await useAuth()
+  const resolveUsingToken = async (
+    to: RouteLocationNormalized,
+    authConfig: ModuleOptions,
+    setBearerToken: (token: string, tokenType: string, expires: number) => Promise<void>
+  ) => {
+    const hashParams = new URLSearchParams(to.hash.substring(1))
 
-    if (to.path === authConfig.redirect.callback) {
-      const queryParams = new URLSearchParams(to.query.toString());
-      if (queryParams.has('error')) {
-        return navigateTo(authConfig.redirect.login)
+    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, { external: true })
+    }
+  }
+
+  const resolveUsingCode = async (
+    to: RouteLocationNormalized,
+    authConfig: ModuleOptions,
+    setBearerToken: (token: string, tokenType: string, expires: number) => Promise<void>,
+    setRefreshToken: (token: string, tokenType: string, expires: number) => Promise<void>
+  ) => {
+
+    if (to.query['code']) {
+      const code = to.query['code'] as string;
+      const stateFromRequest = to.query['state'] as string;
+      const stateFromCookie = useCookie<string>('oauth_state');
+      const codeVerifier = useCookie<string>('oauth_code_verifier');
+
+      if (stateFromRequest !== stateFromCookie.value) {
+        console.warn('State mismatch', stateFromRequest, stateFromCookie.value)
+        return navigateTo(authConfig.redirect.login, { external: true })
       }
 
-      const hashParams = new URLSearchParams(to.hash.substring(1))
+      const formData = new FormData();
+      formData.append('grant_type', 'authorization_code')
+      formData.append('client_id', authConfig.clientId)
+      formData.append('redirect_uri', window.location.origin + authConfig.redirect.callback)
+      formData.append('code_verifier', codeVerifier.value)
+      formData.append('code', code)
 
-      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;
+      const response: Response = await fetch(authConfig.endpoints.token, {
+        method: 'POST',
+        body: formData,
+      })
 
-        await setBearerToken(token, tokenType, parseInt(expires));
-        return navigateTo(authConfig.redirect.home)
+      if (!response.ok) {
+        console.warn('Failed to fetch token', response)
+        return navigateTo(authConfig.redirect.login, { external: true })
+      }
+
+      const data: AccessToken = await response.json();
+      await setBearerToken(data.access_token, data.token_type, data.expires_in)
+      await setRefreshToken(data.refresh_token, data.token_type, authConfig.refreshToken.maxAge)
+      return navigateTo(authConfig.redirect.home, { external: true })
+    }
+  }
+
+  addRouteMiddleware('auth', async (to) => {
+    const {user, authConfig, setBearerToken, setRefreshToken} = await useAuth()
+
+    if (to.path === authConfig.redirect.callback || to.path === authConfig.redirect.callback + '/') {
+      const queryParams = new URLSearchParams(to.query.toString());
+      if (queryParams.has('error')) {
+        return navigateTo(authConfig.redirect.login, { external: true })
+      }
+
+      if (authConfig.responseType === 'token') {
+        return await resolveUsingToken(to, authConfig, setBearerToken)
+      }
+
+      if (authConfig.responseType === 'code') {
+        return await resolveUsingCode(to, authConfig, setBearerToken, setRefreshToken)
       }
 
       return
     }
 
     if (user.value === undefined) {
-      return navigateTo(authConfig.redirect.login)
+      return navigateTo(authConfig.redirect.login, { external: true })
     }
   })
 
@@ -34,7 +100,7 @@ export default defineNuxtPlugin(() => {
     const {user, authConfig} = await useAuth()
 
     if (user.value !== undefined) {
-      return navigateTo(authConfig.redirect.home)
+      return navigateTo(authConfig.redirect.home, { external: true })
     }
   })
 })

src/runtime/support.ts

@@ -0,0 +1,36 @@
+/*
+ * Source: https://docs.cotter.app/sdk-reference/api-for-other-mobile-apps/api-for-mobile-apps
+ */
+
+function dec2hex(dec: any) {
+  return ('0' + dec.toString(16)).substr(-2)
+}
+
+export function generateRandomString() {
+  const array = new Uint32Array(56 / 2);
+  window.crypto.getRandomValues(array);
+  return Array.from(array, dec2hex).join('');
+}
+
+function sha256(plain: any) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(plain);
+  return window.crypto.subtle.digest('SHA-256', data);
+}
+
+function base64urlencode(a: any) {
+  let str = "";
+  const bytes = new Uint8Array(a);
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    str += String.fromCharCode(bytes[i]);
+  }
+  return btoa(str)
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
+}
+
+export async function getChallengeFromVerifier(v: any) {
+  return base64urlencode(await sha256(v));
+}