nuxt-oauth Simple OAuth2 integration for your Nuxt app
Install the dependency:
yarn add nuxt-oauth
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:
```js
// any-component.vue
export default {
mounted () {
const { accessToken, expires } = this.$store.state.oauth
// fetch more details from somewhere...
}
}
nuxt-oauth
will ensure users are logged in before accessing these pages):
// secret.vue
export default { authenticated: true, name: 'MySecretComponent' }
### Configuration
| Option | Required? | Description |
| :----- | :-------- | :---------- |
| `sessionName` | * | Configure the name of the cookie that nuxt-oauth uses |
| `secretKey` | * | Provide a secret key to sign the encrypted cookie. Do not leak this! |
| `oauthHost` | * | Host of your OAuth provider _(usually ending in `oauth` or `oauth2`)_. _Can be string or function receiving args `(req)`_ |
| `oauthClientID` | * | Client ID of your application, registered with your OAuth provider. _Can be string or function receiving args `(req)`_ |
| `oauthClientSecret` | * | Client ID of your application, registered with your OAuth provider. _Can be string or function receiving args `(req)`_ |
| `scopes` | | An array of scopes to authenticate against |
| `authorizationPath` | | The path to redirect users to authenticate _(defaults to `/authorize`)_ |
| `accessTokenPath` | | The path to request the access token _(defaults to `/token`)_ |
| `moduleName` | | The name of the vuex module to be created by nuxt-oauth. _(defaults to `oauth`)_ |
| `sessionDuration` | | The duration of the login session. _(defaults to 24 hours)_ |
| `onLogout` | | Optional hook which is called after logging out. E.g. can be used to perform a full log out on your OAuth provider. _Receives args `(req, res, redirectUrl)`. Can be asynchronous (or return a promise)._ |
| `fetchUser` | | Optional hook which is called when logging in to fetch your user object. _Receives args `(accessToken, request, options)`._ |
| `testMode` | | Flag which tells the module to ignore the OAuth dance and log every one in _(see [here](#with-your-tests) for more)_. |
| `pageComponentPath` | | Optional page component path to replace the default page provided by this library. |
#### 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.
```html
<!-- 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>
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.
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
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.
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.
The module is available as open source under the terms of the MIT License.