Generate an API key
Maintainers:
When designing for the generation of API keys, ensure users know what the key is created for, the security implications, and the end destination of the key.
An example of API key generation with restricted access options
General access keys
Instant generation
Users click a primary Generate button. Consider displaying a Generating… state if the API key takes time to generate.
Once the API key is generated it displays in a modal. Include a Copy button.
Optionally:
- Display two parts to the API key where required
- Provide information text about the API key
- Allow users to toggle the visibility of the key
- Provide a secondary link to download the key
Example of a hidden API key
Example of a revealed API key
Name the API key
You can ask a user to provide a descriptive name before the key is generated. This is particularly useful in instances where a user may have keys for several applications stored in the same location.
Example of an API key destination selector
Restricted access keys
A user may want to limit the access an application or service is granted. Restricted access allows a user to assign specific access control and permissions before the API key is generated.
Many components can be implemented in the modal content space.
Some examples of restricted API key generation
Show the API key in context (optional)
In some use cases, it can be helpful to also show the user the API key in context, after the modal is closed. In this situation, the key should be displayed near the “Generate” button.
The user may also need the option to generate a new API key.
One way to display an API key in context, after the modal is closed.