tachibana-shin/vue-auth3

This plugin is a combination of @websanova/vue-auth and Vue3 and Axios!

vue-auth3

This plugin is a combination of @websanova/vue-auth and Vue3 and Axios! View docs

Installation

NPM / Yarn / Pnpm:

pnpm add vue-auth3

CDN:

<script src="https://unpkg.com/vue-auth3"></script>

Example boot/auth.ts for Quasar Framework

import { createAuth } from "vue-auth3"
import { boot } from "quasar/wrappers"
import driverAuthBearer from "vue-auth3/drivers/auth/bearer"

export default boot(({ app, router, store }) => {
  const auth = createAuth({
    rolesKey: "type",
    notFoundRedirect: "/",
    fetchData: {
      enabled: true,
      cache: true,
    },
    refreshToken: {
      enabled: false,
    },

    plugins: {
      router,
    },
    drivers: {
      http: {
        request: app.config.globalProperties.$api,
      },
      auth: driverAuthBearer,
    },
  })

  app.use(auth)
})

Options

Options.d.ts

type HttpData = AxiosRequestConfig & {
  redirect?: RouteLocationRaw
}
type Options = {
  //var
  rolesKey?: string
  rememberKey?: string
  userKey?: string
  staySignedInKey?: string
  tokenDefaultKey?: string
  tokenImpersonateKey?: string
  stores?: (
    | "cookie"
    | "storage"
    | {
        set: <T>(key: string, value: T, expires: boolean, auth: Auth) => void
        get: <T>(key: string) => T
        remove: (key: string) => void
      }
  )[]
  cookie?: CookieOptions

  // Redirects

  authRedirect?: RouteLocationRaw
  forbiddenRedirect?: RouteLocationRaw
  notFoundRedirect?: RouteLocationRaw

  // Http

  registerData?: HttpData & {
    keyUser?: string
    autoLogin?: boolean
    fetchUser?: boolean
    staySignedIn?: boolean
    remember?: boolean
  }
  loginData?: HttpData & {
    keyUser?: string
    fetchUser?: boolean
    staySignedIn?: boolean
    remember?: boolean
    cacheUser?: boolean
  }

  logoutData?: HttpData & {
    makeRequest?: boolean
  }
  fetchData?: HttpData & {
    keyUser?: string
    enabled?: boolean
    cache?: boolean
  }
  refreshToken?: Omit<HttpData, "redirect"> & {
    enabled?: boolean
    interval?: number | false
  }
  impersonateData?: HttpData & {
    fetchUser?: boolean
    cacheUser?: boolean
  }
  unimpersonateData?: HttpData & {
    fetchUser?: boolean
    makeRequest?: boolean
    cacheUser?: boolean
  }
  oauth2Data?: HttpData & {
    fetchUser?: true
  }

  // Plugin

  plugins?: {
    router?: Router
  }

  // Driver

  drivers: {
    auth: AuthDriver
    http: {
      request: AxiosInstance
      invalidToken?: (auth: Auth, response: AxiosResponse) => boolean
    }
    oauth2?: OAuth2Driver
  }
}

rolesKey

vue-auth3's Issues

Cannot find module 'vue-auth3/drivers/http/fetch'

When I wrote this:

import driverHttpFetch from 'vue-auth3/drivers/http/fetch'

I am getting this error:

src/auth/index.ts:7:29 - error TS2307: Cannot find module 'vue-auth3/drivers/http/fetch' or its corresponding type declarations.

7 import driverHttpFetch from 'vue-auth3/drivers/http/fetch'

I have already checked that fetch.d.ts is near to fetch.js in node_modules. What can be the problem?

Thank you.

`error TS2307: Cannot find module` error in vue3 + vite while type checking (`vue-tsc --build`)

Summary

I am getting the following error while type checking a vue3 + vite project. The configs are default as generated by pnpm create vue@latest. Even though type checking via vue-tsc results in an error the build complete successfully. Also the app runs fine in both dev and production mode.

src/main.ts:9:35 - error TS2307: Cannot find module 'vue-auth3/drivers/auth/bearer-token' or its corresponding type declarations.

9 import driverAuthBearerToken from 'vue-auth3/drivers/auth/bearer-token'
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/main.ts:10:29 - error TS2307: Cannot find module 'vue-auth3/drivers/http/fetch' or its corresponding type declarations.

10 import driverHttpAxios from 'vue-auth3/drivers/http/fetch'
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Repro Steps:

1. Open the project - vue-auth3-bug-repro.zip.
2. Run pnpm install.
3. Run pnpm build. Notice that the build succeed.
4. Run pnpm type-check.
5. Observe the errors.

Expected: No error in type checking
Observed: Type checking fails with error.

Is there something missing from the config?

createAuth is not a function error

import "./style.css";
import App from "./App.vue";
import router from "./routes";
import { createAuth } from "vue-auth3";

import driverAuthBasic from "vue-auth3/drivers/auth/basic";
import driverHttpAxios from "vue-auth3/drivers/http/axios";

const auth = createAuth({
plugins: {
router,
},
drivers: {
auth: driverAuthBasic,
http: driverHttpAxios,
},
})

createAuth.use(router).use(auth).mount("#app")

this code gives me main.ts:20 Uncaught TypeError: auth.use is not a function

Not showing Previous/From Page when directly hitting a page that needs authorisation.

Hey there,

Thanks for building this this awesome plugin. My app needs to know the previous route before redirecting to the login page if unauthorised. I was thinking of storing this in a Store for safe keeping.

It seems, if I'm coming from a valid page, then hit a route with meta: {auth: true}, it redirects me and shows me the previous page fine. However if i directly hit that unauthorised page it comes back with an empty from, and also empty auth.redirect() object.

By directly I mean a new chrome tab - then hit https://domain/requires-auth, it doesn't show me the previous page, but if I'm in a https://domain/open-page, then click a link that takes me to https://domain/requires-auth it shows me the previous page.

This is the method I'm using to try and find the previous page:

router.beforeEach((to, from) => {
console.log('from');
console.log(from);
console.log(auth.redirect())
})

I hope this explanation makes sense. I must be doing something wrong?

Cheers

"Remember me" or "Remember data"

The type of remember option for login and register is boolean but in some places, this is referred as a string type. What is the correct purpose and type of this option?

Also related: https://vue-auth3.js.org/methods/utils.html#remember

Error with Quasar (ts) + vite

When import driverAuthBearer from 'vue-auth3/dist/drivers/auth/bearer', on boot

[vite] Internal server error: Missing "./dist/drivers/auth/bearer" export in "vue-auth3" package

Is this repository being maintained?

I plan to use this plugin in my upcoming Vue.js project. Is this repository up-to-date with the latest Vue.js version?

Error in Vue 3 + Vite

Missing "./dist/drivers/auth/bearer" export in "vue-auth3" package

import router from '@/router'
import { createAuth } from 'vue-auth3'

import driverAuthBearer from 'vue-auth3/dist/drivers/auth/bearer'

`keyUser` didn't support for nested object result

is it possible to make keyUser support dot notation like rolesKey?
https://vue-auth3.js.org/options/core.html#roleskey

The key also supports dot notation as in "my.role.key".

example
when trying fetch user data, the respond i have is like this

{
    "status": 200,
    "success": true,
    "data": {
        "user": {
            "id": 1,
            "name": "Name",
            "role": "user"
        }
    }
}

with current keyUser ability, i can't get get user data in data.user since it's nested

vue-auth3/src/Auth.ts

Lines 567 to 572 in 321a8db

	const keyUser = fetchData.keyUser
	setUserData(
	this,
	keyUser ? response.data[keyUser] : response.data,
	data?.redirect
	)

it would be great is keyUser support dot notation like rolesKey or custom function like parseUserData

parseUserData Support

Coming from @websanova/vue-auth, I was wondering if there is an equivalent configuration of parseUserData to allow me to extract/parse the user data from within my API response, for example when my response looks something like this:

{
  "status": "success",
  "data": {
    "username": "admin",
    "role": "admin"
  }
}

And the meaningful user data is only

{
  "username": "admin",
  "role": "admin"
}

I searched the docs and source code and couldn't find an alternative approach.

About the dropped http plugins support

Would it be possible to reinstate the use of the { plugins: { http: AxiosInstance } } option to pass the local axios instance instead of the driver as an optional configuration option?

I'm asking because I'm working with a legacy frontend that we are now refactoring to vue 3 with quasar and it would help a lot to have the option to use the local axios config, since we have a lot of logic pertaining to the way our auth services are called (headers that are dynamically changed by store, etc). The lib is proving very good with typescript, so we would like to use in lieu of websanova/vue-auth if possible.