Strapi’s User Roles and Permissions for Admin Panel

Prerequisites

Goals

End Users Versus Admin Users

The Administration Panel Versus User and Permission Plugin

Adding a New User to the Administration Panel

  • First, navigate to Settings in the navigation panel by the left. Click on Users under the Administration Panel section. You should see the image below.
  • Next, click on the blue Invite New User button. Fill in the user's details and user's roles. The user can be assigned to more than one Role. However, in this case, we are assigning the user to the Author role. At this point, you will be asked to send a registration token to the user so that they can connect.
  • Since our sample application is locally hosted, copy the link and paste it into your browser. Next, we'll be directed to this page once the token registration loads.
  • Fill in the information required and click on the Let's Start button. Notice that the new user dashboard you just registered only has a media library to upload files. The Super Admin can see files uploaded by any user. Also, notice that when you navigate to Settings/Administration panel/roles, i.e., http://localhost:1337/admin/settings/roles, you now have one registered author.

User Management in the Administration Panel Explained

  • Like in our last example on adding a new user to the admin panel, add one more author and two editors.
  • Navigate to the tab where one of the authors is logged in and add a media. For me, I'll be adding a Jpeg file for one of my users. To do this, click on Media Library in the navigation tab. Next, click on the Upload assets button, and you'll be prompted to upload an asset.

Updating and Adding New Roles in the Administration Panel

  1. Navigate to Settings/Administration Panel/Roles, i.e., http://localhost:1337/admin/settings/roles
  2. Click on the Add new role button.
  3. Fill in the required information, and the new Role you just created will be present in the admin panel.

User Management for End Users

Public Role

Authenticated Role

Permission’s Management

Local Authentication for End Users

Registration

//import axios
import axios from 'axios';

// Add your own code here to customize or restrict how the public can register new users.

// make post request with user's credential
axios
.post('http://localhost:1337/auth/local/register', {
username: 'username',
email: 'email',
password: 'password',
})
.then(response => {
// If user was registered successfully .....
console.log('Well done!');
console.log('User profile', response.data.user);
console.log('User token', response.data.jwt);
})
.catch(error => {
// If there was an error .......
console.log('An error occurred:', error.response);
});

Token Usage

//import axios
import axios from 'axios';

// place your token here or you can use a .env file.
const token = 'YOUR_TOKEN_HERE';

// make post request.
axios
.get('http://localhost:1337/posts', {
// place authorization header here
headers: {
Authorization: `Bearer ${token}`,
},
})
.then(response => {
// If user was registered successfully .....
console.log('Data: ', response.data);
})
.catch(error => {
// If there was an error .......
console.log('An error occurred:', error.response);
});

Email Validation

// import axios
import axios from 'axios';

// Send validation email
axios
.post(`http://localhost:1337/auth/send-email-confirmation`, {
email: 'user@strapi.io', // user's email
})
.then(response => {
// If user was registered successfully .....
console.log('Your user received an email');
})
.catch(error => {
// If there was an error .......
console.error('An error occurred:', error.response);
});

The Use of Providers for End Users Authentication

  • GitHub
  • Facebook
  • Google
  • AWS Cognito
  • Twitter
  • Discord
  • Twitch
  • Instagram
  • VK
  • Linkedin
  • Reddit
  • Auth0

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store