Ionic Side Menu With Role Based Authentication

When you are creating an Ionic app with different roles, chances are high you need different elements/pages for your different user roles. In case of the Ionic side menu, you can easily display different menu elements to your users based on their login role to create role specific Ionic apps!

In this Quick Win we will develop a side menu with dummy login for 2 different users. The admin user should see some admin pages while the regular user can only see his pages.

Remember: In a real world scenario you need to plug in a real backend with authentication! But there’s a JWT course inside the Ionic Academy that helps you setup everything.

The final result of our logic looks like this:

Setting Up Our Ionic Side Menu App

For the start we could also use the Ionic side menu template but I kinda like setting up everything on our own to understand how it works. For our example we need a blank app and a bunch of pages plus a provider that will hold the information about the currently logged in user, so go ahead with:

Although the Ionic CLI should take care of it, make sure that your provider is added to the array of providers inside the app/app.module.ts:

We also want to have a different entry point to our app therefore we sit it to our LoginPage inside the app/app.component.ts:

Now the app is starting with the login page and ready for more functionality!

Adding the Authentication Provider

Although our authentication is just a dummy check for some values, the general idea would be the same with a real backend. In our example we return a promise to be closer to reality and resolve it if the name and password matches our check.

More important, after login we set the information to the currentUser so we can later synchronously get information about the authorised user!

Also, functions like isAdmin or isLoggedIn can make your life easier so make sure to implement helpers like these with your real authentication as well.

Right now you can change your providers/auth/auth.ts to:

The interface we used for the user information is of course not necessary but gives you nice typings and code completion!

Creating the Login

We got the “authentication logic” in place so let’s build the view for the login. Super straight forward 2 fields connected to a model plus a button to submit everything, so change your pages/login/login.html:

Next the logic, but it’s also quite easy as we just need to send the values to the provider and wait for the result. If it’s successful we can continue to the MenuPage which will be the basic template for our menu. Otherwise the login we failed and we display an error.

Open your pages/home/home.ts and change it to:

Note that we don’t have any role specific logic yet! The menu will handle the differences based on the role of the user we have set within the provider.

Creating Our Role Based Menu

Now it’s time to use those values we have created right inside the login function. Normally, your backend would return some type of role that indicates which permissions the user has. You could even return different policies for menu elements that users should be able to see / not see. If you want more information on building such a dynamic app, just leave a comment below the article!

Right now we will simply create the array of pages that is the list within our side menu based on the role of the user – super simple, right?

The admin has 2 admin pages while the regular user just sees his 2 pages. Also we need to set the initial page for both cases where we use our own openPage() function which is also used inside the HTML for the menu later. This function is using the navigation controller of the menu, not just the injected navCtrl! Check out the video our just try it out to see the difference in action.

Finally, the logout function needs to call the root navigation controller of the app to actually override all current pages and not just the main page of our view so we can go back to the login then.

Now wrap everything up and change your pages/menu/menu.ts to:

You also noticed the ionViewCanEnter auth guard probably which is not really utilised in this example, but check out this Quick Win on Auth Guards for more information. Basically, you should still make sure your pages are protected and only the users that have the right role are allowed to enter them (because users might navigate directly to the URL even if it’s not in the menu!).

The (almost) last missing piece is the view for the menu which is a standard Ionic Side menu. The only thing special is that we use our pages array for the menu elements which is created dynamically for the different user groups of our app.

At the bottom we also add a little footer that holds the username of the current user and the logout button – we can easily use this information as it’s stored directly after the login inside the provider.

Open the pages/menu/menu.html and change it to:

Adding a Menu Toggle

Ok I said we were almost done.. but right now all your pages don’t have any button to open the menu! Therefore you should go into the 4 pages we have created which are:

  • AdminPage
  • AdminSecondPage
  • UserPage
  • UserSecondPage

To all of them you can add a button with the menuToggle directive so the button will automatically toggle any menu that’s available! The code for all of them would look like this (just with different titles of course):

Now we are really finished and you can login either with admin/admin to see the 2 admin pages or with user/user to see the user pages.

You could of course have more roles, or as said before even specific menu items based on what users have purchased/enabled for their account inside your backend.

You can also find a video version of this Quick Win below!

Read Next..

Ionic Instagram Image Share If your app works with images, chances are high your users want to post their output to their Instagram account. With Ionic, we can easily add this sh...
Open & Download PDF Files with Ionic Working with PDFs or other files can sometimes be a bit tricky, especially when the WKWebView on iOS handles stuff differently or you only get some bi...
Add “Rate my App” to your Ionic App You think your app rocks but your users are not leaving any reviews? Perhaps you just need to give them a little kick in the right direction so you ca...