Oauth2 Client for Nuxt
- Nuxt 3
yarn add --dev @privyid/nuauth
Then, add into nuxt.config.ts
modules
export default defineNuxtConfig({
modules: ['@privyid/nuauth'],
build : { transpile: ['@privyid/nuauth'] },
})
import { useNuAuth } from '@privyid/nuauth/core'
const {
token,
isAlmostExpired,
login,
logout,
refresh,
} = useNuAuth()
// Get Access-Token
token.value
// Redirect to login page
login()
// Redirect to login page, and redirect to /dashboard after success
login('/dashboard')
// Redirect to logout page
logout()
// Redirect to logout page, and redirect to /dashboard after success re-login
logout('/dashboard')
// Check token is almost expired (15 minutes before Expired Date)
if (isAlmostExpired(15)) {
// Request new token
await refresh()
}
This module read enviroment variables directly.
Env Name | Default | Description |
---|---|---|
OAUTH_HOST | - | (Required) Oauth server's host |
OAUTH_CLIENT_ID | - | (Required) Oauth Client ID |
OAUTH_CLIENT_SECRET | - | (Required) Oauth Client Secret |
OAUTH_REDIRECT_URI | /auth/callback |
Oauth Callback URI |
OAUTH_SCOPE | public read |
Oauth scope |
OAUTH_LOGOUT_URI | - | Oauth Logout URI |
OAUTH_HOME | / |
Redirect path after success login |
OAUTH_REGISTER | false |
Add params register to Oauth Server |
OAUTH_REDIRECT_WHITELIST | - | Redirect path after success login whitelist, for multiple value, use ; as delimeter |
OAUTH_DENIED_REDIRECT | Same as OAUTH_HOME |
Redirect path after user after denying the authorization request |
OAUTH_AUTHORIZE_PATH | /oauth/authorize |
URL path to request an authorization code |
OAUTH_TOKEN_PATH | /oauth/token |
URL path to obtain access tokens |
OAUTH_REVOKE_PATH | /oauth/revoke |
URL path to revoke access tokens |
OAUTH_REFRESH_PATH | Same as OAUTH_TOKEN_PATH |
URL path to refresh access tokens |
👉 See .env.example for example
You can change default cookie config. Add this in your nuxt.config.ts
export default defineNuxtConfig({
// ...
nuauth : {
// ...
cookie: {
httpOnly: true,
sameSite: 'none',
path : '/',
secure : true,
},
// ...
}
})
👉 See here for all cookie options.
Since 0.4.0
, you can target more than one oauth server.
- Add new profile in your
nuxt.config.ts
export default defineNuxtConfig({
// ...
nuauth: {
// ...
profile: {
default: 'oauth',
names : [
'oauth', // default profile
'github', // additional profile
]
}
// ...
}
})
-
Your profile's name will become prefix on config env. ex: If your profile's name
github
, your env will became:GITHUB_HOST
GITHUB_CLIENT_ID
-
GITHUB_CLIENT_SECRET
, GITHUB_REDIRECT_URI
- etc.
-
In your component, explicit the profile you want to use.
import { useNuAuth } from '@privyid/nuauth/core'
const {
token,
isAlmostExpired,
login,
logout,
refresh,
} = useNuAuth('github')
To prevent displaying the redirection page, you can set the sameSite attribute of the cookie to lax
or none
.
export default defineNuxtConfig({
// ...
nuauth: {
// ...
cookie: {
sameSite: 'lax', // or 'none' for cross-origin cookies
}
// ...
}
})
Since 0.7.0
, NuAuth include global middleware which redirect to login page if user not authenticated.
If you want disabled it in some page, you can use set meta page auth
to false
.
<script setup lang="ts">
import { definePageMeta } from '#imports'
definePageMeta({ auth: false })
</script>
Or you can set auth profile using it
<script setup lang="ts">
import { definePageMeta } from '#imports'
definePageMeta({ auth: 'github' })
</script>
Or if you want disable redirect on every pages:
// nuxt.config.ts
export default defineNuxtConfig({
// ...
nuauth: {
// ...
middleware: false,
// ...
}
})
- Clone this repository
- Play Nyan Cat in the background (really important!)
- Enable Corepack using
corepack enable
(usenpm i -g corepack
for Node.js < 16.10) - Run
yarn install
- Run
yarn dev:prepare
to generate type stubs. - Use
yarn dev
to start playground in development mode.