nuxt-oauth v2.9.0

nuxt-oauth Simple OAuth2 integration for your Nuxt app

• Usage
  • Requirements
  • Get Setup
  • Use in your application
  • Configuration
    • Dynamic Configuration
  • Helpers
  • With your tests
• Develop
  • Contributing
  • Thanks
  • License

Usage

Requirements

• Nuxt
• Universal deployment (i.e. a server rendered app, not an SPA)
• a Vuex store

Get Setup

1. Install the dependency:

yarn add nuxt-oauth

2. Add to your nuxt.config.js and configure:

// nuxt.config.js

modules: ['nuxt-oauth'],
oauth: {
  sessionName: 'mySession',
  secretKey: process.env.SECRET_KEY,
  oauthHost: process.env.OAUTH_HOST,
  oauthClientID: process.env.OAUTH_CLIENT_ID,
  oauthClientSecret: process.env.OAUTH_CLIENT_SECRET,
  onLogout: (req, res) => {
    // do something after logging out
  },
  fetchUser: (accessToken, request) => {
    // do something to return the user
    const user = User.findByToken(accessToken, request)
    return user
  }
}

Use in your application

• Use the access token as you'd like from the Vuex store:

// any-component.vue

export default {
  mounted () {
    const { accessToken } = this.$store.state.oauth
    // fetch more details from somewhere...
  }
}

• Mark your authenticated page components (nuxt-oauth will ensure users are logged in before accessing these pages):

// secret.vue

export default {
  authenticated: true,
  name: 'MySecretComponent'
}

Configuration

Dynamic Configuration

To dynamically set configuration at runtime, oauthHost, oauthClientID, oauthClientSecret can be strings but also can be async functions which accept req as their only argument. This can be useful to choose configuration based on the URL or headers of the request.

Helpers

You can also use the functionality manually. nuxt-oauth injects the following helpers into your store, components and ctx.app: $login and $logout. Use these to manually log your user in or out.

Following a successful login/logout, your user will be redirected back to the page from which the helper was called (you can pass a redirectUrl to the helpers to override this). For a full example, see below.

<!-- any-component.vue -->

<template>
  <a @click="logout" v-if="loggedIn">Log Out</a>
  <a @click="login" v-else>Log In</a>
</template>

<script>
  export default {
    asyncData({ app }) {
      // Use from context
      app.$login()
    }
    computed () {
      loggedIn () {
        return this.$store.state.oauth.accessToken
      }
    },
    methods: {
      login () {
        // defaults to redirecting back to the current page
        this.$login()
      },
      logout () {
        // customise the redirrect url
        const redirectUrl = '/my-target-path'
        this.$logout(redirectUrl)
      }
    }
  }
</script>

With your tests

Set options.oauth.testMode to true to tell the module to skip authentication. Using this, along with the fetchUser option, can be helpful in e2e tests to stub your test users.

Develop

git clone git@github.com:SohoHouse/nuxt-oauth.git
cd nuxt-oauth
yarn
yarn test

# To use while developing other apps:
yarn link
cd ../my-other-app
yarn link nuxt-oauth

Running locally

To run the fixture Nuxt app (/test/e2e/fixture) locally, make sure to:

cp .env.example .env

and populate with your real values. Then, run:

yarn dev

To boot the app locally.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/SohoHouse/nuxt-oauth. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Thanks

• Many thanks to Evan You and the VueJS team for sustaining such a vibrant and supportive community around Vue JS
• Many thanks also Alex Chopin, Sébastien Chopin, Pooya Parsa and the other Nuxt contributors for creating this awesome library

License

The module is available as open source under the terms of the MIT License.