tachibana-shin / vue-auth3 Goto Github PK

View Code? Open in Web Editor NEW

22.0 1.0 8.0 2.35 MB

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

Home Page: https://vue-auth3.js.org

License: MIT License

TypeScript 100.00%

auth vue vue-auth vue-auth3 axios quasar-framework vue-router4 vue3

vue-auth3's Introduction

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 People

Contributors

Stargazers

Watchers

Forkers

dahromy l3d00m danielletto2020 jarradwilder joshuayin2019 batmanguyteub ismailarilik ibelievesintumelo

vue-auth3's Issues

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?

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

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

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.

"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?

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.

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.

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'