{"componentChunkName":"component---src-pages-experimental-generate-an-api-key-index-mdx","path":"/experimental/generate-an-api-key/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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":"36d012ff-be33-5cbe-b12d-ae140fb8703b","children":[],"parent":"93dfd3e9-c0f2-50d6-97ba-2d0f8b1b49ee","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":"d05d958a25f8d7e0cec142eabb6cb5f7","counter":1441,"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/3eb073a4/src/pages/experimental/generate-an-api-key/index.mdx"}}}}