Permissions API & Why should you start using it?
Published: 2021-09-01 08:53:56

## 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 🚀
<hr />

## Table of content
- [Introduction](#introduction)
- [Where can we use Permissions API](#usage)
- [Accessing the API](#accessApi)
- [Checking Clipboard permissions](#clipboardPermissions)
- [Checking geolocation permissions](#geolocationPermissions)



<hr />
### <a name="introduction">Introduction</a> 🟢
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.

<hr />

### <a name="usage">Where can we use permissions API 🤔?</a>
- [Clipbaord API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)  
- [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)  
- [Notification API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API)  
- [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)

> *To learn more about Clipboard API read my article [here](https://dev.to/sidmirza4/click-to-copy-81k).*  


### <a name="accessApi">Accessing the permissions API?</a>
`permissions` object is available on `Navigator.permissions` property 👇
```js
const permissions = navigator.permissions;
```  
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.  
 
<hr />

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

### <a name="clipboardPermissions">1️⃣ Using Permissions API for checking Clipboard permissions:</a>
```js
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
});
```
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 👇
```js
// 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
  }
});

```
<hr />

### <a name="geolocationPermissions">2️⃣ Checking `geolocation` permissions using Permissions API:</a>
- 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 👇
```js
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
  }
});
```
<hr />

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](https://www.twitter.com/sidmirza4)

#### Happy Coding