{"componentChunkName":"component---src-pages-experimental-generate-an-api-key-index-mdx","path":"/experimental/generate-an-api-key/","result":{"pageContext":{"frontmatter":{"title":"Generate an API key","description":"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."},"relativePagePath":"/experimental/generate-an-api-key/index.mdx","titleType":"prepend","MdxNode":{"id":"8aa22a4e-5c71-5a14-aced-15363c2b8cb2","children":[],"parent":"9c7522ce-952b-5bb9-ab77-a8bd2992eb40","internal":{"content":"---\ntitle: Generate an API key\ndescription: 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.\n---\n\n<PageDescription>\n\nWhen 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.\n\n</PageDescription>\n\n#### Status:\n\n[Experimental](/experimental/overview)\n\n#### Maintainer:\n\n[Vikki Paterson](https://github.com/vikkipaterson)\n\n![Example of an API key being generated](images/1.png)\n\n## General access keys\n\n### Instant generation\n\nUsers click a primary **Generate** button. Consider displaying a **Generating...** state if the API key takes time to generate.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a generate button.](images/2.png)\n\n</Column>\n</Row>\n\nOnce the API key is generated it displays in a modal. Include a **Copy** button.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a successfully created API key](images/3.png)\n\n</Column>\n</Row>\n\n#### Optionally:\n\n- Display two parts to the API key where required\n- Provide information text about the API key\n- Allow users to toggle the visibility of the key\n- Provide a secondary link to download the key\n\n<Row>\n<Column colLg={8}>\n\n![Example of a hidden API key](images/4.png)\n\n<Caption>Example of a hidden API key</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of a revealed API key](images/5.png)\n\n<Caption>Example of a revealed API key</Caption>\n\n</Column>\n</Row>\n\n### Name the API key\n\nYou 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.\n\n<Row>\n<Column colLg={8}>\n\n![Example of an API key with a custom name](images/6.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of an API key destination selector](images/7.png)\n\n<Caption>Example of an API key destination selector</Caption>\n\n</Column>\n</Row>\n\n## Restricted access keys\n\nA 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.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a restricted API key generation](images/8.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"d599c9ec116240e99db4eb8e97699518","counter":1634,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Generate an API key","description":"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."},"exports":{},"rawBody":"---\ntitle: Generate an API key\ndescription: 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.\n---\n\n<PageDescription>\n\nWhen 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.\n\n</PageDescription>\n\n#### Status:\n\n[Experimental](/experimental/overview)\n\n#### Maintainer:\n\n[Vikki Paterson](https://github.com/vikkipaterson)\n\n![Example of an API key being generated](images/1.png)\n\n## General access keys\n\n### Instant generation\n\nUsers click a primary **Generate** button. Consider displaying a **Generating...** state if the API key takes time to generate.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a generate button.](images/2.png)\n\n</Column>\n</Row>\n\nOnce the API key is generated it displays in a modal. Include a **Copy** button.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a successfully created API key](images/3.png)\n\n</Column>\n</Row>\n\n#### Optionally:\n\n- Display two parts to the API key where required\n- Provide information text about the API key\n- Allow users to toggle the visibility of the key\n- Provide a secondary link to download the key\n\n<Row>\n<Column colLg={8}>\n\n![Example of a hidden API key](images/4.png)\n\n<Caption>Example of a hidden API key</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of a revealed API key](images/5.png)\n\n<Caption>Example of a revealed API key</Caption>\n\n</Column>\n</Row>\n\n### Name the API key\n\nYou 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.\n\n<Row>\n<Column colLg={8}>\n\n![Example of an API key with a custom name](images/6.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of an API key destination selector](images/7.png)\n\n<Caption>Example of an API key destination selector</Caption>\n\n</Column>\n</Row>\n\n## Restricted access keys\n\nA 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.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a restricted API key generation](images/8.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/3f757860/src/pages/experimental/generate-an-api-key/index.mdx"}}}}