CINXE.COM
Icon for additionalSignupField for Lock - Auth0 Community
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Icon for additionalSignupField for Lock - Auth0 Community</title> <meta name="description" content="I’m trying to add custom sign up fields as a part of universal login. I found the parameter to add for these fields which is easy/great. However I’m having a hard time trying to understand where I’m supposed to source th&hellip;"> <meta name="generator" content="Discourse 3.4.0.beta3-dev - https://github.com/discourse/discourse version b9838d606633453b9fb27c90ee98d8a48bb1b8dd"> <link rel="icon" type="image/png" href="https://global.discourse-cdn.com/auth0/optimized/3X/6/8/683858070b3a99e38278121cb791a29de61bf854_2_32x32.png"> <link rel="apple-touch-icon" type="image/png" href="https://global.discourse-cdn.com/auth0/optimized/3X/3/f/3fd656787590f7b189cf4a56ddd4f3a33a591bb2_2_180x180.svg"> <meta name="theme-color" media="all" content="#1E212A"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover"> <link rel="canonical" href="https://community.auth0.com/t/icon-for-additionalsignupfield-for-lock/51535" /> <link rel="search" type="application/opensearchdescription+xml" href="https://community.auth0.com/opensearch.xml" title="Auth0 Community Search"> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/color_definitions_auth0-dark_17_38_06c901ec8a6c179aed4f5c58de4b9820b8d3e933.css?__ws=community.auth0.com" media="all" rel="stylesheet" class="light-scheme"/> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/desktop_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="desktop" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/checklist_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="checklist" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-ai_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-ai" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-akismet_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-akismet" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-assign_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-assign" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-cakeday_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-cakeday" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-chat-integration_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-chat-integration" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-data-explorer_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-data-explorer" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-details_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-details" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-gamification_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-gamification" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-lazy-videos_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-lazy-videos" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-local-dates_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-local-dates" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-narrative-bot_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-narrative-bot" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-policy_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-policy" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-presence_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-presence" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-signatures_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-signatures" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-solved_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-solved" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-templates_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-templates" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-topic-voting_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-topic-voting" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-user-notes_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-user-notes" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/footnote_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="footnote" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/hosted-site_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="hosted-site" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/poll_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="poll" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/spoiler-alert_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="spoiler-alert" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-ai_desktop_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-ai_desktop" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-gamification_desktop_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-gamification_desktop" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/discourse-topic-voting_desktop_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="discourse-topic-voting_desktop" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/poll_desktop_646c39d5bc9cca538d292b8be161681c0bbeeeeb.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="poll_desktop" /> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/desktop_theme_21_bf31e3f4739b656ab88b7db2dc64487075521d79.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="21" data-theme-name="custom header links"/> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/desktop_theme_47_406d9769f7e575c31e3dd90414de70b72fcb04da.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="47" data-theme-name="discourse-right-sidebar-blocks"/> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/desktop_theme_51_afab62dbac9a8e0cdf58021fb582b3dc7b28ea8c.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="51" data-theme-name="discourse-search-banner"/> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/desktop_theme_24_2b7ecc0bae046f227124abcc0f0447de3bd96f37.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="24" data-theme-name="nav links component"/> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/desktop_theme_31_83c7adac6299ab2c97d33293579bea01706845fd.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="31" data-theme-name="auth0 changes dark"/> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/desktop_theme_34_29019c942968b0b727e602e0bc1163a5b5f477e5.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="34" data-theme-name="auth0 footer dark"/> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/desktop_theme_1_3b14070e1329e549c9d2b0f2592b1f00f80f8735.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="1" data-theme-name="changeshield"/> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/desktop_theme_32_cf65b6f9e34dfa57e8c71e7406503b7da9a68622.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="32" data-theme-name="global notice cards dark"/> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/desktop_theme_27_665080fe52a9782a604388500826fb4b65d1a8c9.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="27" data-theme-name="hide "close topic" button"/> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/desktop_theme_33_8a643e350408b900f089e542826aed38539c68e8.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="33" data-theme-name="login/signup/tts buttons dark"/> <link href="https://sea1.discourse-cdn.com/auth0/stylesheets/desktop_theme_38_f86be8c24c4911f26ac9ed3267d50fb92c88d373.css?__ws=community.auth0.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="38" data-theme-name="auth0 dark theme"/> <meta class="swiftype" name="type" data-type="enum" content="community"> <meta class="swiftype" name="popularity" data-type="integer" content="1"> <script defer="" src="https://sea1.discourse-cdn.com/auth0/theme-javascripts/57e1a7363ca815bc5c6359f9a74f807241e71a9f.js?__ws=community.auth0.com" data-theme-id="32" nonce="za3O9xoL2UFG8KrAxaDALrFZ4"></script> <!-- OneTrust Cookies Consent Notice start for auth0.com --> <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" type="text/javascript" charset="UTF-8" data-domain-script="96e22fd8-d619-4cdd-a3c6-d51529d21faf" nonce="za3O9xoL2UFG8KrAxaDALrFZ4"></script> <!-- OneTrust Cookies Consent Notice end for auth0.com --><script defer="" src="https://sea1.discourse-cdn.com/auth0/theme-javascripts/05307152db436f7a0bceab32f2c21c96394b5e0e.js?__ws=community.auth0.com" data-theme-id="36" nonce="za3O9xoL2UFG8KrAxaDALrFZ4"></script> <meta name="google-site-verification" content="e3-Qc3SifheVYHHiQgWMNJDXgN2tS0UL-yDA0xZHjEA"> <link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'Icon for additionalSignupField for Lock'" href="https://community.auth0.com/t/icon-for-additionalsignupfield-for-lock/51535.rss" /> <meta property="og:site_name" content="Auth0 Community" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:image" content="https://global.discourse-cdn.com/auth0/original/3X/1/6/16853e875d08e2ecb9567815d184264e6d0bfe96.png" /> <meta property="og:image" content="https://global.discourse-cdn.com/auth0/original/3X/1/6/16853e875d08e2ecb9567815d184264e6d0bfe96.png" /> <meta property="og:url" content="https://community.auth0.com/t/icon-for-additionalsignupfield-for-lock/51535" /> <meta name="twitter:url" content="https://community.auth0.com/t/icon-for-additionalsignupfield-for-lock/51535" /> <meta property="og:title" content="Icon for additionalSignupField for Lock" /> <meta name="twitter:title" content="Icon for additionalSignupField for Lock" /> <meta property="og:description" content="I’m trying to add custom sign up fields as a part of universal login. I found the parameter to add for these fields which is easy/great. However I’m having a hard time trying to understand where I’m supposed to source the icons from that fit with the Auth0 existing icons. This is what I have added to my universal login: additionalSignUpFields: [{ "name": "mobile", "placeholder": "your phone number (eg. +61412345678)", "icon": "https://raw.githubusercontent.com/feath..." /> <meta name="twitter:description" content="I’m trying to add custom sign up fields as a part of universal login. I found the parameter to add for these fields which is easy/great. However I’m having a hard time trying to understand where I’m supposed to source the icons from that fit with the Auth0 existing icons. This is what I have added to my universal login: additionalSignUpFields: [{ "name": "mobile", "placeholder": "your phone number (eg. +61412345678)", "icon": "https://raw.githubusercontent.com/feath..." /> <meta property="og:article:section" content="Help" /> <meta property="og:article:section:color" content="E81CB8" /> <meta property="og:article:tag" content="lock" /> <meta property="og:article:tag" content="login" /> <meta name="twitter:label1" value="Reading time" /> <meta name="twitter:data1" value="1 mins 🕑" /> <meta name="twitter:label2" value="Likes" /> <meta name="twitter:data2" value="3 ❤" /> <meta property="article:published_time" content="2020-10-14T04:44:46+00:00" /> <meta property="og:ignore_canonical" content="true" /> <script type="application/ld+json">{"@context":"http://schema.org","@type":"QAPage","name":"Icon for additionalSignupField for Lock","mainEntity":{"@type":"Question","name":"Icon for additionalSignupField for Lock","text":"I’m trying to add custom sign up fields as a part of universal login. I found the parameter to add for these fields which is easy/great. However I’m having a hard time trying to understand where I’m supposed to source the icons from that fit with the Auth0 existing icons. This is what I have added t…","upvoteCount":2,"answerCount":0,"datePublished":"2020-10-14T04:44:46.231Z","author":{"@type":"Person","name":"ike1","url":"https://community.auth0.com/u/ike1"}}}</script> </head> <body class="crawler browser-update"> <script defer="" src="https://sea1.discourse-cdn.com/auth0/theme-javascripts/15f50f54c6b9fd2decb766c645bd721d5983895c.js?__ws=community.auth0.com" data-theme-id="38" nonce="za3O9xoL2UFG8KrAxaDALrFZ4"></script> <script defer="" src="https://sea1.discourse-cdn.com/auth0/theme-javascripts/9e5ecf8a4d999ee9a504a427f0c2897ab001e87d.js?__ws=community.auth0.com" data-theme-id="15" nonce="za3O9xoL2UFG8KrAxaDALrFZ4"></script> <header> <a href="/"> Auth0 Community </a> </header> <div id="main-outlet" class="wrap" role="main"> <div id="topic-title"> <h1> <a href="/t/icon-for-additionalsignupfield-for-lock/51535">Icon for additionalSignupField for Lock</a> </h1> <div class="topic-category" itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/c/help/6" class="badge-wrapper bullet" itemprop="item"> <span class='badge-category-bg' style='background-color: #E81CB8'></span> <span class='badge-category clear-badge'> <span class='category-name' itemprop='name'>Help</span> </span> </a> <meta itemprop="position" content="1" /> </span> </div> <div class="topic-category"> <div class='discourse-tags list-tags'> <a href='https://community.auth0.com/tag/lock' class='discourse-tag' rel="tag">lock</a>, <a href='https://community.auth0.com/tag/login' class='discourse-tag' rel="tag">login</a> </div> </div> </div> <div itemscope itemtype='http://schema.org/DiscussionForumPosting'> <meta itemprop='headline' content='Icon for additionalSignupField for Lock'> <link itemprop='url' href='https://community.auth0.com/t/icon-for-additionalsignupfield-for-lock/51535'> <meta itemprop='datePublished' content='2020-10-14T04:44:46Z'> <meta itemprop='articleSection' content='Help'> <meta itemprop='keywords' content='lock, login'> <div itemprop='publisher' itemscope itemtype="http://schema.org/Organization"> <meta itemprop='name' content='Auth0, Inc.'> <div itemprop='logo' itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop='url' content='https://global.discourse-cdn.com/auth0/original/3X/2/9/29f71c18beab11bce67eb8ca6d95b5a6317f2d0d.svg'> </div> </div> <div id='post_1' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://community.auth0.com/u/ike1'><span itemprop='name'>ike1</span></a> </span> <link itemprop="mainEntityOfPage" href="https://community.auth0.com/t/icon-for-additionalsignupfield-for-lock/51535"> <link itemprop="image" href="https://global.discourse-cdn.com/auth0/original/3X/1/6/16853e875d08e2ecb9567815d184264e6d0bfe96.png"> <span class="crawler-post-infos"> <time datetime='2020-10-14T04:44:46Z' class='post-time'> October 14, 2020, 4:44am </time> <meta itemprop='dateModified' content='2020-10-14T04:44:46Z'> <span itemprop='position'>1</span> </span> </div> <div class='post' itemprop='text'> <p>I’m trying to add custom sign up fields as a part of universal login. I found the parameter to add for these fields which is easy/great. However I’m having a hard time trying to understand where I’m supposed to source the icons from that fit with the Auth0 existing icons. This is what I have added to my universal login:</p> <pre><code class="lang-auto"> additionalSignUpFields: [{ "name": "mobile", "placeholder": "your phone number (eg. +61412345678)", "icon": "https://raw.githubusercontent.com/feathericons/feather/master/icons/smartphone.svg" }] </code></pre> <p>And this is the result:</p> <p><img src="https://global.discourse-cdn.com/auth0/original/3X/1/6/16853e875d08e2ecb9567815d184264e6d0bfe96.png" alt="image" data-base62-sha1="3ddYGGf1nRaMdIatuX0bn340AN8" width="492" height="421"></p> <p>I guess the mismatch of the colour can’t be helped, but its positioning is also off. Auth0 offers this icon field but no guidance around how to actually use it properly. I’ve tried other icons but it just gets worse (icon isnt constrained to the grey box).</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="2" /> <span class='post-likes'>2 Likes</span> </div> </div> <div id='post_2' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://community.auth0.com/u/anishsinha0128'><span itemprop='name'>anishsinha0128</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2021-10-26T20:10:17Z' class='post-time'> October 26, 2021, 8:10pm </time> <meta itemprop='dateModified' content='2021-10-26T20:10:17Z'> <span itemprop='position'>2</span> </span> </div> <div class='post' itemprop='text'> <p>I’m facing the same problem here and cannot find anything in auth0’s documentation page about this. Auth0 has icons on <a href="https://identicons.dev/" rel="noopener nofollow ugc">https://identicons.dev/</a> but doesn’t give any instructions on how to use them in the signup form.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_3' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://community.auth0.com/u/anishsinha0128'><span itemprop='name'>anishsinha0128</span></a> </span> <link itemprop="image" href="https://global.discourse-cdn.com/auth0/original/3X/0/8/08a5fca46898a32a26221d5bb88df67af38527d6.jpeg"> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2021-10-26T20:46:22Z' class='post-time'> October 26, 2021, 8:46pm </time> <meta itemprop='dateModified' content='2021-10-26T20:46:22Z'> <span itemprop='position'>3</span> </span> </div> <div class='post' itemprop='text'> <p>Update–</p> <p>I put together a solution that seems a bit hacky, but it works and is responsive on mobile devices as well as desktop. In the login form html, above the first script tag, I inserted:</p> <pre><code class="lang-auto"><style>.auth0-lock.auth0-lock .auth0-lock-input-wrap .auth0-lock-custom-icon { width: 30px; margin: 0 auto; padding: 0; top:5px;left:5px; } </style> </code></pre> <p>For the actual icon source, I went to identicons.dev, and I right clicked on each image icon and copied its image address. I wish that Auth0 offered a more straightforward way of copying the urls here, but I had to make do. As far as I know, all icons from there will work with my solution. Additionally, all the icons there are “Royalty-free, free-to-use icons and clipart representing fundamental identity concepts. Use them in presentations, specifications and documentation”, so there shouldn’t be an issue about licensing or copyright.</p> <p>My ‘additionalSignUpFields’ looks like: `additionalSignUpFields: [<br> {<br> name: “first_name”,<br> placeholder: “your first name”,<br> icon: “<a href="https://identicons.dev/static/icons/gray/svg/icon-user.svg" rel="noopener nofollow ugc">https://identicons.dev/static/icons/gray/svg/icon-user.svg</a>”</p> <p>},<br> {name: “last_name”, placeholder: “your last name”,icon: “<a href="https://identicons.dev/static/icons/gray/svg/icon-user.svg" rel="noopener nofollow ugc">https://identicons.dev/static/icons/gray/svg/icon-user.svg</a>”}],`</p> <p>I apologize for the bad formatting. The final signup page looks like: <div class="lightbox-wrapper"><a class="lightbox" href="https://global.discourse-cdn.com/auth0/original/3X/0/8/08a5fca46898a32a26221d5bb88df67af38527d6.jpeg" data-download-href="/uploads/short-url/1evrAF8MBXZfPZI2ijpquY518qy.jpeg?dl=1" title="Screen Shot 2021-10-26 at 4.45.25 PM" rel="noopener nofollow ugc"><img src="https://global.discourse-cdn.com/auth0/optimized/3X/0/8/08a5fca46898a32a26221d5bb88df67af38527d6_2_258x500.jpeg" alt="Screen Shot 2021-10-26 at 4.45.25 PM" data-base62-sha1="1evrAF8MBXZfPZI2ijpquY518qy" width="258" height="500" srcset="https://global.discourse-cdn.com/auth0/optimized/3X/0/8/08a5fca46898a32a26221d5bb88df67af38527d6_2_258x500.jpeg, https://global.discourse-cdn.com/auth0/optimized/3X/0/8/08a5fca46898a32a26221d5bb88df67af38527d6_2_387x750.jpeg 1.5x, https://global.discourse-cdn.com/auth0/optimized/3X/0/8/08a5fca46898a32a26221d5bb88df67af38527d6_2_516x1000.jpeg 2x" data-dominant-color="BCC2C6"><div class="meta"> <svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">Screen Shot 2021-10-26 at 4.45.25 PM</span><span class="informations">756×1460 81.5 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg> </div></a></div></p> <p>I hope this was helpful. I hope Auth0 sees this and they provide a less hacky solution, or a better way to do this. Feel free to reply if you need more information.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> </div> <div id='post_4' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://community.auth0.com/u/scott14'><span itemprop='name'>scott14</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-01-04T22:36:15Z' class='post-time'> January 4, 2024, 10:36pm </time> <meta itemprop='dateModified' content='2024-01-04T22:36:15Z'> <span itemprop='position'>4</span> </span> </div> <div class='post' itemprop='text'> <p>This is great - thank you.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> </div> <div id="related-topics" class="more-topics__list " role="complementary" aria-labelledby="related-topics-title"> <h3 id="related-topics-title" class="more-topics__list-title"> Related topics </h3> <div class="topic-list-container" itemscope itemtype='http://schema.org/ItemList'> <meta itemprop='itemListOrder' content='http://schema.org/ItemListOrderDescending'> <table class='topic-list'> <thead> <tr> <th>Topic</th> <th></th> <th class="replies">Replies</th> <th class="views">Views</th> <th>Activity</th> </tr> </thead> <tbody> <tr class="topic-list-item" id="topic-list-item-35905"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='1'> <span class="link-top-line"> <a itemprop='url' href='https://community.auth0.com/t/customize-universal-login-lock-with-additionalsignupfields/35905' class='title raw-link raw-topic-link'>Customize Universal Login (Lock) with additionalSignUpFields</a> </span> <div class="link-bottom-line"> <a href='/c/help/6' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #E81CB8'></span> <span class='badge-category clear-badge'> <span class='category-name'>Help</span> </span> </a> <div class="discourse-tags"> <a href='https://community.auth0.com/tag/additionalsignupfiel' class='discourse-tag'>additionalsignupfiel</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>7</span> </td> <td class="views"> <span class='views' title='views'>10345</span> </td> <td> January 23, 2020 </td> </tr> <tr class="topic-list-item" id="topic-list-item-40408"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='2'> <span class="link-top-line"> <a itemprop='url' href='https://community.auth0.com/t/adding-icons-to-additional-sign-up-fields-problem/40408' class='title raw-link raw-topic-link'>Adding icons to additional sign up fields problem</a> </span> <div class="link-bottom-line"> <a href='/c/help/6' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #E81CB8'></span> <span class='badge-category clear-badge'> <span class='category-name'>Help</span> </span> </a> <div class="discourse-tags"> <a href='https://community.auth0.com/tag/lock' class='discourse-tag'>lock</a> , <a href='https://community.auth0.com/tag/auth0' class='discourse-tag'>auth0</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>1</span> </td> <td class="views"> <span class='views' title='views'>3040</span> </td> <td> April 3, 2020 </td> </tr> <tr class="topic-list-item" id="topic-list-item-24847"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='3'> <span class="link-top-line"> <a itemprop='url' href='https://community.auth0.com/t/lock-additionalsignup-field-icon-requirements/24847' class='title raw-link raw-topic-link'>Lock additionalSignUp Field icon requirements</a> </span> <div class="link-bottom-line"> <a href='/c/help/6' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #E81CB8'></span> <span class='badge-category clear-badge'> <span class='category-name'>Help</span> </span> </a> <div class="discourse-tags"> <a href='https://community.auth0.com/tag/additionalsignupfiel' class='discourse-tag'>additionalsignupfiel</a> , <a href='https://community.auth0.com/tag/lock-11' class='discourse-tag'>lock-11</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>3</span> </td> <td class="views"> <span class='views' title='views'>3996</span> </td> <td> May 22, 2019 </td> </tr> <tr class="topic-list-item" id="topic-list-item-14931"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='4'> <span class="link-top-line"> <a itemprop='url' href='https://community.auth0.com/t/available-icons-for-additional-sign-up-fields/14931' class='title raw-link raw-topic-link'>Available icons for additional sign up fields?</a> </span> <div class="link-bottom-line"> <a href='/c/help/6' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #E81CB8'></span> <span class='badge-category clear-badge'> <span class='category-name'>Help</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>2</span> </td> <td class="views"> <span class='views' title='views'>4148</span> </td> <td> August 26, 2019 </td> </tr> <tr class="topic-list-item" id="topic-list-item-11418"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='5'> <span class="link-top-line"> <a itemprop='url' href='https://community.auth0.com/t/additional-fields-in-sign-in-form/11418' class='title raw-link raw-topic-link'>Additional fields in sign-in form</a> </span> <div class="link-bottom-line"> <a href='/c/help/6' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #E81CB8'></span> <span class='badge-category clear-badge'> <span class='category-name'>Help</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>11</span> </td> <td class="views"> <span class='views' title='views'>10820</span> </td> <td> February 25, 2019 </td> </tr> </tbody> </table> </div> </div> </div> <footer class="container wrap"> <nav class='crawler-nav'> <ul> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/' itemprop="url">Home </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/categories' itemprop="url">Categories </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/guidelines' itemprop="url">Guidelines </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='https://auth0.com/terms' itemprop="url">Terms of Service </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='https://auth0.com/privacy' itemprop="url">Privacy Policy </a> </span> </li> </ul> </nav> <p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p> </footer> <footer> <div class="footer-container"> <!--<img class="footer-logo-image" src="https://global.discourse-cdn.com/auth0/original/3X/9/5/953cda6e310bd31411f0b5faabdb6cd085847294.png">--> <nav role="navigation" class="footer-sitemap"> <section role="menubar"> <a href="https://auth0.com/docs" role="menuitem" class="footer-nav-title"> <span class="footer-nav-title-text">Documentation</span> </a> <ul role="menubar" class="footer-nav-list"> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/docs/quickstarts" class="footer-nav-item-link">Quickstarts </a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/docs/api" class="footer-nav-item-link">Auth0 APIs</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/docs/" class="footer-nav-item-link">SDK Libraries</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/docs/articles" class="footer-nav-item-link">Articles</a> </li> </ul> </section> <section role="menubar"> <a href="https://auth0.com/resources" role="menuitem" class="footer-nav-title"><span class="footer-nav-title-text">Resources</span></a> <ul role="menubar" class="footer-nav-list"> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/developers/hub/code-samples" class="footer-nav-item-link">Code Samples</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/blog" class="footer-nav-item-link">Developer Blog</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://www.youtube.com/auth0" class="footer-nav-item-link">Videos</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://identityunlocked.auth0.com/public/49/Identity%2C-Unlocked.--bed7fada" class="footer-nav-item-link">Podcast</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="/newsletter" class="footer-nav-item-link">Newsletter</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/docs/glossary" class="footer-nav-item-link">Glossary</a> </li> </ul> </section> <section role="menubar"> <p class="footer-nav-title-text">Tools</p> <ul role="menubar" class="footer-nav-list"> <li role="menuitem" class="footer-nav-list-item"> <a href="https://discord.gg/XbQpZSF2Ys" class="footer-nav-item-link">Auth0 Lab</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://openidconnect.net/" class="footer-nav-item-link">OIDC Playground</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://jwt.io/" class="footer-nav-item-link">JWT</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://webauthn.me/" class="footer-nav-item-link">Webauthn</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://samltool.io/" class="footer-nav-item-link">SAML Tool</a> </li> </ul> </section> <section role="menubar"> <p class="footer-nav-title-text">Community</p> <ul role="menubar" class="footer-nav-list"> <li role="menuitem" class="footer-nav-list-item"> <a href="https://community.auth0.com/" class="footer-nav-item-link">Forum</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/ambassador-program" class="footer-nav-item-link">Ambassador Program</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="/events" class="footer-nav-item-link">Events</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://support.auth0.com/" class="footer-nav-item-link">Support</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/apollo-program" class="footer-nav-item-link">Apollo Program</a> </li> </ul> </section> <section role="menubar"> <p class="footer-nav-title-text">Company</p> <ul role="menubar" class="footer-nav-list"> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/about" class="footer-nav-item-link">About Us</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/customers" class="footer-nav-item-link">Our Customers</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/partners" class="footer-nav-item-link">Partners</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/careers" class="footer-nav-item-link">Careers</a><span class="were-hiring">We’re hiring!</span> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/press" class="footer-nav-item-link">Press</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/security" class="footer-nav-item-link">Compliance</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/social-impact" class="footer-nav-item-link">Social Impact</a> </li> </ul> </section> <section role="menubar"> <p class="footer-nav-title-text">GET STARTED</p> <ul role="menubar" class="footer-nav-list"> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/signup" class="footer-nav-item-link">Sign Up</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/pricing" class="footer-nav-item-link">Pricing</a> </li> <li role="menuitem" class="footer-nav-list-item"> <a href="https://auth0.com/contact-us" class="footer-nav-item-link">Contact Sales</a> </li> </ul> <div class="footer-nav-social"> <a href="https://x.com/auth0" target="_blank" rel="noopener noreferrer" aria-label="Twitter"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M23.0626 5.13281C22.2469 5.49375 21.3751 5.7375 20.4563 5.85C21.3938 5.2875 22.1157 4.39687 22.4532 3.3375C21.5766 3.85781 20.6063 4.2375 19.5704 4.43906C18.7407 3.55312 17.5594 3 16.2563 3C13.7485 3 11.7188 5.03437 11.7188 7.54219C11.7188 7.89844 11.7563 8.24531 11.836 8.57812C8.06257 8.39062 4.7157 6.58125 2.47976 3.82969C2.0907 4.5 1.8657 5.28281 1.8657 6.1125C1.8657 7.6875 2.67195 9.07969 3.8907 9.89531C3.1407 9.87656 2.43757 9.67031 1.8282 9.32812V9.38437C1.8282 11.5875 3.39382 13.4203 5.47039 13.8375C5.0907 13.9406 4.68757 13.9969 4.27507 13.9969C3.98445 13.9969 3.69851 13.9687 3.42195 13.9125C3.99851 15.7172 5.67664 17.0297 7.66414 17.0672C6.11257 18.2859 4.1532 19.0125 2.02507 19.0125C1.65945 19.0125 1.29851 18.9891 0.942261 18.9469C2.94382 20.25 5.32976 21 7.88914 21C16.2469 21 20.8126 14.0766 20.8126 8.07187C20.8126 7.875 20.8079 7.67812 20.7985 7.48594C21.6844 6.84375 22.4532 6.04688 23.0626 5.13281Z" fill="white"></path> </svg> </a> <a href="https://linkedin.com/company/auth0" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.5561 3H4.53738C3.71707 3 2.99988 3.59063 2.99988 4.40156V19.4531C2.99988 20.2687 3.71707 20.9953 4.53738 20.9953H19.5514C20.3764 20.9953 20.9952 20.2641 20.9952 19.4531V4.40156C20.9999 3.59063 20.3764 3 19.5561 3ZM8.578 18H5.99988V9.98438H8.578V18ZM7.378 8.76562H7.35925C6.53425 8.76562 5.99988 8.15156 5.99988 7.38281C5.99988 6.6 6.54831 6 7.39206 6C8.23581 6 8.75144 6.59531 8.77019 7.38281C8.77019 8.15156 8.23581 8.76562 7.378 8.76562ZM17.9999 18H15.4218V13.6172C15.4218 12.5672 15.0468 11.85 14.1139 11.85C13.4014 11.85 12.9796 12.3328 12.7921 12.8016C12.7218 12.9703 12.703 13.2 12.703 13.4344V18H10.1249V9.98438H12.703V11.1C13.078 10.5656 13.6639 9.79688 15.028 9.79688C16.7202 9.79688 17.9999 10.9125 17.9999 13.3172V18Z" fill="white"></path> </svg> </a> <a href="https://github.com/auth0" target="_blank" rel="noopener noreferrer" aria-label="GitHub"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 1.5C6.20156 1.5 1.5 6.32344 1.5 12.2672C1.5 17.025 4.50937 21.0562 8.68125 22.4813C8.74687 22.4953 8.80312 22.5 8.85938 22.5C9.24844 22.5 9.39844 22.2141 9.39844 21.9656C9.39844 21.7078 9.38906 21.0328 9.38437 20.1328C8.99062 20.2219 8.63906 20.2594 8.325 20.2594C6.30469 20.2594 5.84531 18.6891 5.84531 18.6891C5.36719 17.4469 4.67813 17.1141 4.67813 17.1141C3.76406 16.4719 4.67344 16.4531 4.74375 16.4531H4.74844C5.80313 16.5469 6.35625 17.5687 6.35625 17.5687C6.88125 18.4875 7.58437 18.7453 8.2125 18.7453C8.70469 18.7453 9.15 18.5859 9.4125 18.4641C9.50625 17.7703 9.77812 17.2969 10.0781 17.025C7.74844 16.7531 5.29688 15.8297 5.29688 11.7047C5.29688 10.5281 5.70469 9.56719 6.375 8.81719C6.26719 8.54531 5.90625 7.44844 6.47812 5.96719C6.47812 5.96719 6.55312 5.94375 6.7125 5.94375C7.09219 5.94375 7.95 6.08906 9.36563 7.07344C10.2047 6.83437 11.1 6.71719 11.9953 6.7125C12.8859 6.71719 13.7859 6.83437 14.625 7.07344C16.0406 6.08906 16.8984 5.94375 17.2781 5.94375C17.4375 5.94375 17.5125 5.96719 17.5125 5.96719C18.0844 7.44844 17.7234 8.54531 17.6156 8.81719C18.2859 9.57188 18.6937 10.5328 18.6937 11.7047C18.6937 15.8391 16.2375 16.7484 13.8984 17.0156C14.2734 17.3484 14.6109 18.0047 14.6109 19.0078C14.6109 20.4469 14.5969 21.6094 14.5969 21.9609C14.5969 22.2141 14.7422 22.5 15.1312 22.5C15.1875 22.5 15.2531 22.4953 15.3187 22.4813C19.4953 21.0562 22.5 17.0203 22.5 12.2672C22.5 6.32344 17.7984 1.5 12 1.5Z" fill="white"></path> </svg> </a> </div> </section> </nav> </div> <nav class="footer-subfooter"> <div role="navigation" class="footer-subfooter-container"> <p class="footer-subfooter-copyright"> ©2013 - 2022 Auth0® Inc. All Rights Reserved. </p> <ul role="menubar" class="footer-subfooter-list"> <li role="menuitem" class="footer-subfooter-item"> <a href="https://status.auth0.com" class="footer-subfooter-item-link">Status</a> </li> <li role="menuitem" class="footer-subfooter-item"> <a href="https://www.okta.com/agreements/" class="footer-subfooter-item-link">Legal</a> </li> <li role="menuitem" class="footer-subfooter-item"> <a href="https://auth0.com/privacy" class="footer-subfooter-item-link">Privacy</a> </li> <li role="menuitem" class="footer-subfooter-item"> <a href="https://auth0.com/web-terms" class="footer-subfooter-item-link">Terms</a> </li> </ul> </div> </nav> </footer> <div class="buorg"><div>Unfortunately, <a href="https://www.discourse.org/faq/#browser">your browser is unsupported</a>. Please <a href="https://browsehappy.com">switch to a supported browser</a> to view rich content, log in and reply.</div></div> </body> </html>