Decathlon OAuth2

Nuxtjs module to use DktConnect OAuth2 authentication.

Installation

npm i -S @sport-activities/nuxt-oauth2

Requirements

• Your application as to be served by an Express server (@see https://nuxtjs.org/examples/auth-routes#using-express-and-sessions)
• Redis server (to store sessions)
• Vuex store

Usage

In nuxt.config.js

modules: [
  ...,
  ['@sport-activities/nuxt-oauth2', {
    providers: [
      {
        name: 'decathlon-connect',
        authorizationURL: `${process.env.DKT_CONNECT_HOST}/authorize`,
        tokenURL: `${process.env.DKT_CONNECT_HOST}/token`,
        clientID: process.env.DKT_CLIENT_ID,
        clientSecret: process.env.DKT_CLIENT_SECRET,
        callbackURL: process.env.DKT_REDIRECT_URI,
        scopes: ['openid', 'profile', 'email'],
        redirect: {
          success: '/user/profile',
          failure: '/',
          logout: '/',
        },
      },
      {
        name: 'fedid',
        authorizationURL: `${process.env.FED_HOST}/authorization.oauth2`,
        tokenURL: `${process.env.FED_HOST}/token.oauth2`,
        clientID: process.env.FED_CLIENT_ID,
        clientSecret: process.env.FED_CLIENT_SECRET,
        callbackURL: process.env.FED_REDIRECT_URI,
        scopes: ['openid', 'profile'],
        redirect: {
          success: '/user/profile',
          failure: '/',
          logout: '/',
        },
    ],
    redirect: {
      unauthorized: '/',
    },
    session: {
      secret: process.env.SESSION_SECRET,
      resave: false,
      saveUninitialized: false,
      cookie: {
        maxAge: 1 * 24 * 3600 * 1000 // 1 day
      }
    },
    redis: {
      url: process.env.REDIS_URL,
      logErrors: true
    },
    debug: true,
  }],
  ...
]

You need to dispatch an auth/init event to store the authentication data in the Vuex store.

In store/index.js

const createStore = () => {
  return new Vuex.Store({
    ...,
    actions: {
      async nuxtServerInit ({ dispatch }, { app, req, store }) {
        // init auth store
        dispatch('auth/init', req.user)

        ...
      }
    }
  ...
  }

/!\ As it's session based authentication, you have to send credentials in ajax requests, if you want to get accessToken from req.user object (in express middleware for example)

An example using Axios library :

axios
  .get(`${env.API_URL}api/v1/sports`, {
    withCredentials: true
  })
  .then(res => res.data)

Options

Provider

| name | type | required | default | description | |------|------|----------|---------|-------------| | name | string | true | | Provider identifier used as param for login()/logout() | | authorizationURL | string | true | | | | tokenURL | string | true | | | | clientID | string | true | | | | clientSecret | string | true | | | | callbackURL | string | true | | | | scopes | array | false | | | | redirect | object | false | { success: '/', failure: '/', logout: '/' } | |

Redirect

| name | type | required | default | description | |------|------|----------|---------|-------------| | unauthorized | string | false | / | The endpoint to redirect in case of access to a protected page without authentication |

Session

See express-session documentation

Redis

This parameter is optional.

If fields it instance a RedisStore. Otherwise, fallback to default in-memory store.

Default value :

redis: {
  url: 'redis://localhost:6379'
}

See connect-redis documentation

Debug

You can pass a debug flag in order to obtains debug logs. Default debug state match NODE_ENV value (production value set debug to false).

Vuex store

The module set date in auth store module. You can easily access to the module state through this.$auth.state.

| name | type | description | |-------------|---------|-----------------------------------------| | provider | string | OAuth2 provider name | | accessToken | string | OAuth2 access token | | expiresAt | string | OAuth2 access token expiration date | | loggedIn | boolean | Logged in status (based on accessToken) |

Generated routes

This module automatically creates the following routes :

| route | description | |----------------|------------------------------------------------------------| | /login-{providerName} | Start login process | | /logout-{providerName} | Start logout process | | /auth/callback | Callback OAuth2 route based on oauth2.callbackURL option |

Nuxt usage (and SSR general purposes)

To easily handle credentials during SSR, you can simply use @nuxtjs/axios to perform yout ajax requests. It automaticaly adds credentials in both SSR and classic ajax request and manage headers correctly. It also provide an easy way to manage token through a setToken method.

$auth service

An auth service is automaticaly injected during module initialization, with the following content :

| methods | arguments | description | |-------------|-----------|--------------------------------------------| | login | name, from | start login process, for given provider | | logout | name, from | start logout process, for given provider |

| attributes | description | |-------------|--------------------------------------------| | state | Vuex auth module |