DEV Community 👩‍💻👨‍💻

Cover image for Permissions API & Why should you start using it?
Mohd Shahid
Mohd Shahid

Posted on • Updated on

Permissions API & Why should you start using it?

Hey guys 👋

In this article I will explain the usage, importance and use cases of Permissions API and why is it so important for user experience.

Let's get started 🚀


Table of content


Introduction 🟢

The Permissions API can be used to determine if permission to access a particular API has been granted ✅ or denied ❌.

The Permissions API provides the tools to allow us developers to implement a better user experience as far as permissions are concerned.

Which is vital to increase the accessibility and usability of the application.

Permissions API does not work in Safari and IE.


Where can we use permissions API 🤔?

To learn more about Clipboard API read my article here.

Accessing the permissions API?

permissions object is available on Navigator.permissions property 👇

const permissions = navigator.permissions;
Enter fullscreen mode Exit fullscreen mode

For checking the status of permission of a certain API .query() method is used which is available on permissions object.

.query() accepts a parameter say permissionDescriptor which is an object defining on which API query should fire on.

.query() will return a promise which will resolve to PermissionStatus object which will tell us about the status of the certain permission.


Enogh talk 😅, let's see it in action 👇

-

1️⃣ Using Permissions API for checking Clipboard permissions:

const permissions = navigator.permissions;

permissions.query({name: 'clipboard-write'}).then(cbWritePermission => {
console.log(cbWritePermission.state) // "granted"

// clipboard-write permission is granted by the browser automatically
});
Enter fullscreen mode Exit fullscreen mode

In the above example the state property will tell us about the status of the permission. It can have following values:

granted: Permission is granted.

denied: Permission is denied.

prompt: Permission is not yet asked.

Let's see an example of clipboard-read permission 👇

// suppose a scnerio where you want to do 
// something with the text before it get pasted by the user 
// in your application. 
// or you want to auto-capture copied text
// checking the item before doing anything
// with it is also good for security.

// reading text on a click
button.addEventListener("click", async () => {
  const cbReadPermissionStatus = await permissions.query({
    name: "clipboard-read",
  });
  if (
    cbReadPermissionStatus.state === "granted" ||
    cbReadPermissionStatus.state === "prompt"
  ) {
    const text = await navigator.clipboard.readText();
    // do something with the text
  } else {
    // show a nice error message, or ask for the permission nicely
  }
});

Enter fullscreen mode Exit fullscreen mode

2️⃣ Checking geolocation permissions using Permissions API:

  • building an application where the current location of the user is important for a feature to work in your application? Then this one is for you.

See the example below 👇

button.addEventListener("click", async () => {
  const geoPermissionStatus = await permissions.query({ name: "geolocation" });

  if (
    geoPermissionStatus.state === "granted" ||
    geoPermissionStatus.state === "prompt"
  ) {
    navigator.geolocation.getCurrentPosition((pos) => {
      console.log(pos);
      // do something with the location
      // show friends around the user for eg
      // or move the map to the user's location
    });
  } else {
    // show warning that certain feature of the app
    // will not work if the location permission is not provided
  }
});
Enter fullscreen mode Exit fullscreen mode

Others APIs permissions can be checked using the same procedure as defined above.

Thank you for giving it a read. ❤️

Please follow me on twitter

Happy Coding

Top comments (6)

Collapse
 
devfranpr profile image
DevFranPR

Why use permision API over a JWT token? This isn't a bad reply or something, just honest curiosity.

Collapse
 
sidmirza4 profile image
Mohd Shahid Author

Permission API and JWT both have different use cases.
JWT is primarily used for authentication and data exchange which involves complex algorithms, whereas permissions API only runs in browser and is quite easy to use.

I hope this clears your doubt.
Thanks for the response

Collapse
 
devfranpr profile image
DevFranPR

Silly me, I missunderstood the concept. My bad, forget about it.

Thread Thread
 
sidmirza4 profile image
Mohd Shahid Author

That's ok

Thread Thread
 
schizox10 profile image
Azim Anuar

Hi sir..im actually understand what the API is, but to get using the permission API via clipboard and other you list above, i think i should learn javascript from the beginning..im trying actually on freecodecamp.org but stuck at uncomment task..trying to figure it out many times, also trying to get tutorial on the web, but also not helping me..sigh..where should i start actually?

Thread Thread
 
sidmirza4 profile image
Mohd Shahid Author

Yeah that is right, you have to learn basics of javascript to understand these APIs. To do I recommend you take a video course whether on udemy or youtube.
Hope it helps

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.