Question about registering users with different roles

Help
1

I’d like to create a site that has two unique sets of users. One would be “Coaches” and the other would be “Students”. What is the best way of registering these users using Auth0?

2

Hi @aspiringpro,

Have you looked into RBAC?

4

@dan.woda Yes I was reading about it but how would I assign the role to a user during a registration flow? I’m thinking I would have a multi step form where if a user wanted to register, they would first answer a question like “Are you a coach or a student?” and then proceed from there.

5

Got it. Here is how I would proceed:

  • Add an additionalSignupFields select option with coach and student:
    Lock Configuration Options

    • You can add this to your universal login lock config in the dashboard. Just add it to your custom login code.

  • You can then add the metadata to your id token via a custom claim in a rule. There is an example in this doc:
    OpenID Connect Scopes

  • Then all you will have to do is check for coach or student in the id token in your app.

You could use RBAC for this, and to do so you will have to take the metadata, then assign the user a role based on that info, kind of like this example:
http://community.auth0.com/t/how-do-i-add-a-default-role-to-a-new-user-on-first-login/25857/2

RBAC will provide a built in UI for managing roles, but is more intended to setting up permissions with an api. If that is something you are doing, then use RBAC, otherwise metadata will be a little lighter weight. Either one will work here.

Thanks,
Dan

6

@dan.woda
I was able to add the select option to the lock but am confused as to the second step of adding the metadata to the id token. I noticed that when I run my app, and I try to register, the user is registered and the metadata is there but now it does not log the user in. Where do I add the custom claim rule? My app code is visible at GitHub - aspiringpro/vue-auth0: Vue Auth0 using vuex and vue router

7

You will add this rule in the Auth0 Dashboard under Rules.

Let me know if this helps.

8

@dan.woda

So this is the code that I added as a rule.

function (user, context, callback) {
  const namespace = 'http://localhost:8080';
  context.idToken[namespace + 'usertype'] = user.usertype;
  callback(null, user, context);
}

Does that look correct?

9

You will need to reference the metadata like this:

function (user, context, callback) {
const namespace = ‘http://localhost:8080’;
context.idToken[namespace + ‘usertype’] = user.user_metadata.usertype;
callback(null, user, context);
}

You can use whatever you want for the namespace as long as it follows namespacing rules.

10

How do I check for coach or student in the id token from my app?

11

Which technology or SDK are you using? auth0-spa-js or auth0.js or something else?

Generally, the ID token is a JWT which can be decoded and it contains the custom claim such as usertype that’s been added in a rule. But depending on the Auth0 SDK you’re using, there are probably already sufficient helper methods available to make this lookup easy.

12

I am using auth0-js. Once again, my code can be viewed at

Here is my store.js file:

import Vue from 'vue'
import Vuex from 'vuex'
import auth0 from 'auth0-js'
import router from './router'

Vue.use(Vuex)

export default new Vuex.Store({
state: {
userIsAuthorized:false,
auth0: new auth0.WebAuth({
  domain: process.env.VUE_APP_AUTH0_CONFIG_DOMAIN,
  clientID: process.env.VUE_APP_AUTH0_CONFIG_CLIENTID,
  redirectUri: process.env.VUE_APP_DOMAINURL + '/callback',
  responseType: process.env.VUE_APP_AUTH0_CONFIG_RESPONSETYPE,
  scope: process.env.VUE_APP_AUTH0_CONFIG_SCOPE,
}),
  },
mutations: {
setUserIsAuthenticated(state, replacement){
  state.userIsAuthorized = replacement;
}
  },
actions: {
auth0Login(context){
console.log('In a store action');
context.state.auth0.authorize()
},
auth0Logout(context){
  console.log('In a store logout action');
  localStorage.removeItem('access_token');
  localStorage.removeItem('id_token');
  localStorage.removeItem('expires_at');

// redirect to auth0 logout to completely log the user Out

window.location.href = process.env.VUE_APP_AUTH0_CONFIG_DOMAINURL + "/v2/logout? 
returnTo" + process.env.VUE_APP_DOMAINURL + "/&client_id=" + 
process.env.VUE_APP_AUTH0_CONFIG_CLIENTID;
},
auth0HandleAuthentication (context) {
  context.state.auth0.parseHash((err, authResult) => {
    if (authResult && authResult.accessToken && authResult.idToken) {
      let expiresAt = JSON.stringify(
        authResult.expiresIn * 1000 + new Date().getTime()
      )
      //save the tokens locally
      localStorage.setItem('access_token', authResult.accessToken);
      localStorage.setItem('id_token', authResult.idToken);
      localStorage.setItem('expires_at', expiresAt);

      router.replace('/members');
    }
    else if (err) {
      alert('login failed. Error #KJN838');
      router.replace('/');
      console.log(err);
    }
  })
},
 }
})
1 Like
13

With your rule above in place, It should be in

authResult.idTokenPayload["http://localhost:8080/usertype"]

By the way: it’s best practice, for security reasons, to not store the tokens in localStorage or sessionStorage, actually don’t store them at all on the client side. Use silent authentication (via checkSession method) instead to request a new one on i.e. browser reload. See:

1 Like
14

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.