{
    "componentChunkName": "component---src-pages-blog-markdown-remark-fields-slug-js",
    "path": "/blog/oidc-token",
    "result": {"data":{"markdownRemark":{"html":"<h2 id=\"table-of-contents\" style=\"position:relative;\"><a href=\"#table-of-contents\" aria-label=\"table of contents permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Table of Contents</h2>\n<ol>\n<li><a href=\"#introduction\">Introduction</a></li>\n<li><a href=\"#understanding-oidc-tokens\">Understanding OIDC Tokens</a>\n<ul>\n<li><a href=\"#types-of-oidc-tokens\">Types of OIDC Tokens</a></li>\n</ul>\n</li>\n<li><a href=\"#the-role-of-oidc-tokens-in-security-protocols\">The Role of OIDC Tokens in Security Protocols</a></li>\n<li><a href=\"#balancing-security-and-user-experience\">Balancing Security and User Experience</a></li>\n<li><a href=\"#best-practices-for-implementing-oidc-tokens\">Best Practices for Implementing OIDC Tokens</a></li>\n<li><a href=\"#practical-implementation-example\">Practical Implementation Example</a></li>\n<li><a href=\"#conclusion\">Conclusion</a></li>\n</ol>\n<h2 id=\"introduction\" style=\"position:relative;\"><a href=\"#introduction\" aria-label=\"introduction permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Introduction</h2>\n<p>As developers, we constantly seek ways to bolster security and efficiency in our applications. One powerful tool at our disposal is the OpenID Connect (OIDC) token. This article explores OIDC tokens, their functionality, and how to implement them effectively to maximize security without compromising user experience.</p>\n<h2 id=\"understanding-oidc-tokens\" style=\"position:relative;\"><a href=\"#understanding-oidc-tokens\" aria-label=\"understanding oidc tokens permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Understanding OIDC Tokens</h2>\n<p>OIDC tokens are fundamental components of the OpenID Connect protocol, an identity layer built on top of OAuth 2.0. In the OAuth 2.0 framework, OIDC tokens verify user identity and provide user information to client applications.</p>\n<h3 id=\"types-of-oidc-tokens\" style=\"position:relative;\"><a href=\"#types-of-oidc-tokens\" aria-label=\"types of oidc tokens permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Types of OIDC Tokens</h3>\n<ol>\n<li>\n<p><strong>ID Token</strong>: A JSON Web Token (JWT) containing user information such as unique identifier, email, and profile data. Its primary purpose is user identity verification.</p>\n</li>\n<li>\n<p><strong>Access Token</strong>: Used to access protected resources on behalf of the user. Unlike the ID token, it contains permissions or scopes rather than user information.</p>\n</li>\n<li>\n<p><strong>Refresh Token</strong>: Enables obtaining new access tokens without requiring user re-authentication, ensuring continuous access and a smooth user experience.</p>\n</li>\n</ol>\n<h2 id=\"the-role-of-oidc-tokens-in-security-protocols\" style=\"position:relative;\"><a href=\"#the-role-of-oidc-tokens-in-security-protocols\" aria-label=\"the role of oidc tokens in security protocols permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>The Role of OIDC Tokens in Security Protocols</h2>\n<p>OIDC tokens play a crucial role in application security. Here’s a high-level overview of their integration into the authentication and authorization process:</p>\n<ol>\n<li><strong>Authentication Request</strong>: The client application initiates an authentication request to the OIDC provider.</li>\n<li><strong>User Authentication</strong>: The user authenticates with the OIDC provider, typically by entering credentials.</li>\n<li><strong>Token Issuance</strong>: Upon successful authentication, the OIDC provider issues an ID token and an access token to the client application.</li>\n<li><strong>Resource Access</strong>: The client application uses the access token to access protected resources on the user’s behalf.</li>\n<li><strong>Token Refresh</strong>: If the access token expires, the client application can use the refresh token to obtain a new access token without requiring user re-authentication.</li>\n</ol>\n<h2 id=\"balancing-security-and-user-experience\" style=\"position:relative;\"><a href=\"#balancing-security-and-user-experience\" aria-label=\"balancing security and user experience permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Balancing Security and User Experience</h2>\n<p>While OIDC tokens enhance security, improper implementation can negatively impact user experience (UX). Common pitfalls include:</p>\n<ul>\n<li>Frequent re-authentication due to short-lived access tokens and lack of refresh mechanisms</li>\n<li>Overly complex login flows leading to user confusion and higher drop-off rates</li>\n<li>Poor handling of token expiry resulting in unexpected logouts or loss of unsaved work</li>\n</ul>\n<h2 id=\"best-practices-for-implementing-oidc-tokens\" style=\"position:relative;\"><a href=\"#best-practices-for-implementing-oidc-tokens\" aria-label=\"best practices for implementing oidc tokens permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Best Practices for Implementing OIDC Tokens</h2>\n<p>To effectively implement OIDC tokens and maintain a balance between security and UX, consider the following best practices:</p>\n<ol>\n<li>\n<p><strong>Leverage Refresh Tokens</strong>: Implement refresh tokens to minimize re-authentication needs. Ensure secure storage and regular rotation of refresh tokens.</p>\n</li>\n<li>\n<p><strong>Optimize Token Lifespan</strong>: Balance access token lifespan for security and user convenience. Consider shorter lifespans for high-security applications and longer ones for less sensitive use cases.</p>\n</li>\n<li>\n<p><strong>Streamline Login Flows</strong>: Design intuitive, straightforward login processes. Implement single sign-on (SSO) where applicable to reduce login frequency.</p>\n</li>\n<li>\n<p><strong>Implement Secure Storage</strong>: Utilize platform-specific secure storage mechanisms (e.g., Keychain on iOS, Keystore on Android) for client-side token storage.</p>\n</li>\n<li>\n<p><strong>Regularly Rotate Tokens</strong>: Periodically rotate tokens to mitigate potential compromises. Implement graceful token revocation mechanisms.</p>\n</li>\n</ol>\n<h2 id=\"practical-implementation-example\" style=\"position:relative;\"><a href=\"#practical-implementation-example\" aria-label=\"practical implementation example permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Practical Implementation Example</h2>\n<p>Here’s a practical example of implementing OIDC tokens using SuperTokens:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"45471458899426610000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied!\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`import SuperTokens from 'supertokens-auth-react';\n\nimport Session from 'supertokens-auth-react/recipe/session';\n\nimport ThirdPartyEmailPassword from 'supertokens-auth-react/recipe/thirdpartyemailpassword';\n\nSuperTokens.init({\n\n    appInfo: {\n        appName: &quot;Your App&quot;,\n        apiDomain: &quot;https://api.yourapp.com&quot;,\n        websiteDomain: &quot;https://yourapp.com&quot;\n    },\n    recipeList: [\n        ThirdPartyEmailPassword.init(),\n        Session.init()\n    ]\n});\n`, `45471458899426610000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                <svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"ts\"><pre class=\"language-ts\"><code class=\"language-ts\"><span class=\"token keyword\">import</span> SuperTokens <span class=\"token keyword\">from</span> <span class=\"token string\">'supertokens-auth-react'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">import</span> Session <span class=\"token keyword\">from</span> <span class=\"token string\">'supertokens-auth-react/recipe/session'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">import</span> ThirdPartyEmailPassword <span class=\"token keyword\">from</span> <span class=\"token string\">'supertokens-auth-react/recipe/thirdpartyemailpassword'</span><span class=\"token punctuation\">;</span>\n\nSuperTokens<span class=\"token punctuation\">.</span><span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n\n    appInfo<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        appName<span class=\"token operator\">:</span> <span class=\"token string\">\"Your App\"</span><span class=\"token punctuation\">,</span>\n        apiDomain<span class=\"token operator\">:</span> <span class=\"token string\">\"https://api.yourapp.com\"</span><span class=\"token punctuation\">,</span>\n        websiteDomain<span class=\"token operator\">:</span> <span class=\"token string\">\"https://yourapp.com\"</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    recipeList<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        ThirdPartyEmailPassword<span class=\"token punctuation\">.</span><span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n        Session<span class=\"token punctuation\">.</span><span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>SuperTokens automatically handles the issuance and management of OIDC tokens when the SDK is initialized. For more detailed implementation guidance, refer to the <a href=\"https://supertokens.com/product\" target=\"_blank\" rel=\"nofollow\">SuperTokens documentation</a>.</p>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>OIDC tokens are invaluable tools for enhancing login system security and efficiency. Throughout this article, we’ve explored their types, functionality, and best practices for implementation. By leveraging OIDC tokens effectively, developers can create a robust security framework that doesn’t compromise user experience.</p>","frontmatter":{"date":"May 26, 2024","title":"How To Use OIDC Tokens For More Efficient & Secure Login","cover":"oidc-token.png","author":"Darko Bozhinovski","description":"Discover how to leverage OpenID Connect (OIDC) tokens to enhance your application's security without compromising user experience.Learn how to balance robust security measures with seamless user interactions, and get practical tips for integrating OIDC tokens into your authentication flow."},"fields":{"slug":"/oidc-token/"}},"site":{"siteMetadata":{"title":"SuperTokens Blog"}}},"pageContext":{"id":"d0a2de92-cdc2-5c1a-a658-de87be36e6f2","fields__slug":"/oidc-token/","__params":{"fields__slug":"oidc-token"}}},
    "staticQueryHashes": []}