NuAuth

Oauth2 Client for Nuxt

Compabilities

Nuxt 3

Instalation

yarn add --dev @privyid/nuauth

Then, add into nuxt.config.ts modules

export default defineNuxtConfig({
  modules: ['@privyid/nuauth'],
  build  : { transpile: ['@privyid/nuauth'] },
})

Usage

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()
}

Configuration

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

👉 See .env.example for example

Cookie Serialize Config

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.

Multiple Server Profile

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')

Disable redirection page

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
    }
    // ...
  }
})

Middleware Guard

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>

Contribution

Clone this repository
Play Nyan Cat in the background (really important!)
Enable Corepack using corepack enable (use npm 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.

License

MIT License

afrijaldz/nuauth