🔑 Auth FedId Nuxt-Module

• Petit graphique : https://miro.com/app/board/uXjVOvOdkrw=/?share_link_id=103616250273

Setup

1. Add your projects to FedId with direct url myProjectBaseUrl/token (ei: http://locahost:3000/token)
2. [Optional] If you want to authenticate with Firebase, add your projects to Custom-Token Service
3. Install module yarn add firebase @nuxtjs/auth-next @nuxtjs/axios
4. Install module yarn add --exact @weparis/auth-fedid
5. Setup module in nuxt.config.ts

import {NuxtConfig} from '@nuxt/types'

const config: NuxtConfig = {
    // ...
    modules: [
        '@weparis/auth-fedid',
        // ...
    ],

    fedid: {
        firebase: {  // optional
            clientId: firebaseConfig.result.sdkConfig.projectId,
            withEmulator: process.env.NODE_ENV !== 'production',
            withRole: 'MyGame', // optional
            appRole: 'MyGame' // optional
        },
        fedIdClientId:
            process.env.FED_CLIENT_ID || 'Ce65851a3b3b7c18762d48e09add0709a490151b8a',
        autoLogin: true,
        isPreProd: process.env.INFRA_ENV !== 'production',
    },

}
export default config

5. The module comes with types by providing a decleration file (index.d.ts) within the npm package. All you need to do is to include "@nuxtjs/firebase" in your tsconfig.json types like so:

{
  "compilerOptions": {
    "types": [
      "node",
      "@nuxt/types",
      // ...
      "@weparis/auth-fedid"
    ]
  }
}

Usage

• If you set autoLogin: true no code is needed :)
• If you set autoLogin: false you need to protect yourself your path by using auth middleware more information here, and manage the login action by calling in your Nuxt application:

this.$loginWithFedId()
this.$logout()

• If you are not using with Firebase you have all data access in $auth or $store.state.auth more information here or here

Warning: If you use router middleware

If you use router middleware you must escape route /token (mandatory) and /login (if you use autoLogin: true) like below

import { Middleware } from '@nuxt/types'

const myMiddleware: Middleware = async ({ store, route, redirect }) => {
  if (route.path.startsWith('/token')) return // Escape (mandatory)
  if (route.path.startsWith('/login')) return // Escape only if you have autoLogin: true
  // your middleware logic
}

export default myMiddleware

Options

fedIdClientId

REQUIRED - ClientId give by FedId, be careful to set all your directUri by myProjectBaseUrl/token

autoLogin

• Default: false

If you set to true your application will be automatically redirect to FedId Login

If you set to false, you will need to manage manually your login action by calling: this.$loginWithFedId()

isPreProd

• Default: false

If you set to true your application will connect directly to the pre-production FedId

If you set to false your application will connect directly to the production FedId

firebase

Not mandatory if you don't use Firebase. Important activate your authentication services in your Firebase console.

clientId

REQUIRED - If you want to synchronize your Firebase authentication, add your project to Custom-Token Service. Set with your custom token clientId.

Tips: if you import automatically your firebase.config, set your custom token clientId with the same name as your FirebaseId, you can configure your nuxt.config.ts like this:

 fedid: {
    // ...
    firebaseClientId: firebaseConfig.result.sdkConfig.projectId
}

withRole

• Default: null

If set to MyGame (for instance) firebase-custom-token service will check if user has role (check if role include id=MyGame). If not will throw a 401 on nuxt (you can manage error using error.vue layout and check error.statusCode === 401)

appRole

• Default: null

Due to a problem of user having too much role (i.e. Boris), I can't inject all roles in Firebase User. This option filtered specific role. For instance, if you work with MyGame with Manager, Admin, Director roles. Setting appRole: 'MyGame' will display filtered role like

claims.fedId.appRoles

[
    'id=Admin,id=MyGame,id=appRole,ou=role,OU=Repository,o=decathlon',
    'id=Manager,id=MyGame,id=appRole,ou=role,OU=Repository,o=decathlon',
    'id=Director,id=MyGame,id=appRole,ou=role,OU=Repository,o=decathlon',
]

API

$loginWithFedId()

Run login action, send user to FedId Login page.

Can be use everywhere in Nuxt: this.$loginWithFedId() or context.$loginWithFedId()

$logout()

Run logout action,logout firebase user and remove all cookie from authentication. Do not logout from FedId.

Can be use everywhere in Nuxt: this.$logout() or context.$logout()

Development

Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

Test

You can use yarn link to debug the module

Release

The release is automated by release-semantic plugin. When merge to master:

• Generate tag version
• Automate library versioning based on commit history
• Generate changelog based on commit history

<type>(<scope>): <short summary>
  │       │             │
  │       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.
  │       │
  │       └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|ect.
  │
  └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test
  
## Breaking Release (Note that the BREAKING CHANGE: token must be in the footer of the commit)
BREAKING CHANGE: The graphiteWidth option has been removed.
The default graphite width of 10mm is always used for performance reasons.