Meta tags:
description=Secure, scalable, and highly available authentication and user management for any app.;

Headings (most frequently used words):

the, sign, in, page, style, your, use, widget, for, custom, own, about, authentication, customization, links, on, csp, code, buttons, modify, add, color, redirect, embedded, examples, see, also, additional, this, accessibility, compliance, content, security, policy, domain, edit, editor, brands, api, bypass, variables, request, context, hide, or, suppress, transient, initial, logo, css, strings, localization, host, language, files, sheet, scripts, per, application, enable, features, okta, hosted, version, contact, legal, more, information, learning, outcomes, what, you, need, sample, known, limitations, configure, default, pagetitle, signinwidgetresources, bgimageurl, usesiwgen3, oktautil, themedstylesurl, faviconurl, background, border, text, positioning, width, identity, provider,

Text of the page (most frequently used words):
the (289), sign (112), page (70), you (65), okta (60), for (51), and (50), your (45), widget (39), can (34), use (30), app (30), example (29), authentication (28), that (28), style (26), new (26), add (25), #custom (23), #default (23), window (23), see (22), code (22), config (21), opens (20), com (18), css (18), this (18), login (18), content (17), redirect (17), customize (17), var (17), html (17), editor (16), text (16), container (16), color (16), csp (15), link (15), oktautil (15), https (15), requestcontext (15), javascript (15), following (15), title (14), url (14), customization (13), request (13), click (13), with (12), context (12), own (11), embedded (11), variables (11), object (11), script (11), note (11), about (10), language (10), modify (10), domain (10), section (10), password (10), target (10), head (10), when (10), policy (9), features (9), customizations (9), changes (9), set (9), using (9), getrequestcontext (9), value (9), name (9), http (9), gen3 (9), primaryauth (9), security (8), more (8), resources (8), version (8), hosted (8), examples (8), then (8), type (8), href (8), client (8), engine (8), meta (8), exampleapp (8), red (8), opacity (8), only (8), also (7), files (7), brands (7), header (7), uses (7), feature (7), method (7), from (7), return (7), get (7), want (7), width (7), background (7), information (6), scripts (6), strings (6), bypass (6), edit (6), error (6), select (6), are (6), required (6), need (6), console (6), users (6), identity (6), generation (6), assets (6), list (6), enter (6), any (6), configure (6), auth (6), doesn (6), uri (6), gen2 (6), trusted (6), all (5), support (5), enable (5), per (5), application (5), sheet (5), logo (5), initial (5), api (5), email (5), pages (5), make (5), update (5), details (5), user (5), override (5), flows (5), have (5), openid (5), classic (5), not (5), apps (5), function (5), signinwidgetresources (5), third (5), json (5), languages (5), baseurl (5), youroktadomain (5), i18n (5), idp (5), end (5), inserts (5), usesiwgen3 (5), tags (5), report (5), contrast (5), compliance (4), links (4), buttons (4), options (4), true (4), document (4), rel (4), specific (4), admin (4), server (4), clientid (4), issuer (4), pagetitle (4), device (4), help (4), labels (4), back (4), lang (4), string (4), properties (4), display (4), these (4), main (4), parameters (4), what (4), button (4), mycontext (4), isloginhidden (4), transition (4), image (4), available (4), external (4), primary (4), white (4), black (4), status (3), contact (3), localization (3), suppress (3), accessibility (3), other (3), bottom (3), save (3), major (3), minor (3), settings (3), registration (3), oktasignin (3), appid (3), styles (3), stylesheet (3), getappid (3), configuration (3), appearance (3), connect (3), undefined (3), which (3), multiple (3), below (3), hosting (3), used (3), signin (3), instead (3), different (3), username (3), values (3), border (3), unlock (3), location (3), block (3), include (3), based (3), impact (3), logincontainer (3), show (3), optional (3), there (3), body (3), urlparams (3), detect (3), query (3), toggle (3), response (3), experience (3), org (3), label (3), 0oadday782xulhyp90h3 (3), demo (3), how (3), appears (3), allows (3), migrate (3), panel (3), enforced (3), mydomain (3), ratio (3), copyright (2), trust (2), case (2), notes (2), pricing (2), terms (2), integrator (2), free (2), plan (2), forum (2), host (2), hide (2), transient (2), github (2), test (2), existing (2), versions (2), such (2), reset (2), individual (2), flags (2), don (2), getsigninwidgetconfig (2), retrieve (2), notation (2), featurename (2), certain (2), flow (2), depends (2), tab (2), credentials (2), integration (2), applications (2), inspect (2), web (2), saml (2), access (2), renders (2), called (2), calling (2), current (2), side (2), understand (2), load (2), something (2), here (2), none (2), robots (2), scale (2), viewport (2), charset (2), utf (2), equiv (2), line (2), look (2), branding (2), supported (2), dist (2), isn (2), path (2), option (2), key (2), errors (2), please (2), tooltip (2), placeholder (2), found (2), adding (2), them (2), png (2), forgot (2), both (2), www (2), clicking (2), navigates (2), another (2), btn (2), customauth (2), classname (2), its (2), known (2), programmatic (2), false (2), just (2), log (2), logic (2), needed (2), 500ms (2), some (2), visual (2), 302 (2), icon (2), faviconurl (2), themedstylesurl (2), returns (2), oauth2 (2), response_mode (2), state (2), redirect_uri (2), response_type (2), scope (2), sample_client (2), returned (2), nonce (2), migration (2), variable (2), but (2), styling (2), template (2), bgimageurl (2), configured (2), curly (2), braces (2), render (2), escapes (2), hello (2), into (2), sample (2), made (2), controls (2), images (2), without (2), turn (2), off (2), next (2), turning (2), revert (2), between (2), published (2), choose (2), view (2), draft (2), directly (2), before (2), origin (2), against (2), project (2), scenarios (2), installed (2), hosts (2), feedback, 2026, rights, reserved, system, knowledgebase, roadmaps, center, products, studies, archive, auth0, 3rd, party, integrate, trademarks, privacy, site, sales, our, team, legal, dev, questions, ask, additional, environment, notifications, sms, messages, address, aren, familiar, recommends, highest, latest, capabilities, they, releases, component, interact, entire, assigning, removes, break, always, shown, earlier, caution, pass, usual, disable, property, bracket, dot, single, flag, sets, work, correctly, configures, runtime, appendchild, createelement, 00exampleclientid, copy, box, general, file, particular, orgs, possible, secure, swa, bookmark, oidc, uniquely, identifies, write, safely, exists, aware, means, caused, useful, inline, yourcustomscript, src, yourcustomstylesheet, extend, source, folder, npm, package, acme, codes, replaces, requested, falls, base, where, served, loads, relative, country_, login_, lets, already, supports, serve, cdn, 登錄入, iniciar, sesión, specified, one, country, abbreviations, depending, specify, structure, reference, failed, e0000004, super, secret, repeat, 10px, 90deg, hotpink, 50px, lightpink, linear, gradient, provider, 100px, auto, 8px, margin, position, 600px, positioning, form, beacon, blank, provides, addition, portal, account, forgotpassword, helplinks, change, including, their, urls, example2, example1, custombuttons, initialization, discusses, self, conditions, platform, webfinger, responses, rules, consider, alternative, integrations, within, since, verification, however, may, limited, finger, solutions, indicate, should, hidden, again, sure, displayed, might, search, would, allow, seen, else, let, remain, capture, has, param, urlsearchparams, utility, getelementbyid, presence, build, out, part, 200ms, safari, webkit, delay, remove, brief, resolve, non, receive, result, coding, performs, 200, could, appear, briefly, during, interrupting, branded, two, impacts, shortcut, favicon, themed, theme, builder, enabled, loaded, initiated, route, otherwise, authorize, stored, retrievable, commands, ausblkmh242vtu5430h2, form_post, asdf, debug, protocol, c0bflxeyh61aweyznlh, jszp55ujtjqxgahxbch, lo8, code_challenge, i2q3rga3fpgx3f9yfuglkc0pdzzrb8todsojfwmzscch6hi4dhixgl6pnfj0pyuo, s256, code_challenge_method, vqpcuggcsykbwucfnqhlsehajvi5en1xxtywwxfigsxq0bvesnkmh4gscswtuhpa, enduser, callback, max_age, act, defines, global, contains, methods, complete, describes, important, noncevalue, shows, design, tokens, unlike, requires, works, affect, roll, conditional, behaviors, organization, setting, changed, selecting, contain, elements, inject, functionality, automatically, triple, unescaped, errordescription, double, escaped, escaping, special, characters, displays, paragraph, element, escape, replace, written, predefined, insert, relevant, refer, mustache, bypasses, left, backdoor, goes, wrong, brings, dashboard, templates, icons, colors, needing, alter, discard, publishing, restores, difference, edited, split, unified, compare, publish, preview, open, brand, snippets, offers, basic, advanced, transform, steps, leave, customized, testing, validation, mode, enforcement, send, violation, entered, directive, adds, fetch, directives, redirects, maximum, uris, too, many, size, exceed, limit, allowed, software, limits, reduce, number, avoid, overall, easier, control, policies, limitations, analyze, potentially, malicious, addresses, seek, threatinsight, take, effect, domains, 6b8a16, ffffff, therefore, 000000, achieve, either, sometimes, chosen, results, less, than, happens, ensure, must, after, match, apply, easy, provided, library, gives, fully, featured, customizable, authenticate, website, whether, embed, sheets, learning, outcomes, second, guide, explains, deployment, models, loading, docs, blog, community, developer,

Text of the page (random words):
esiwgen3 to add specific code that works when you enable gen3 but doesn t affect other code in the template if you need to roll back to gen2 note if your org uses classic engine the usesiwgen3 variable appears in the code editor but you can t use it the following example shows how to style the login container for a migration to gen3 usesiwgen3 style nonce noncevalue okta login container background color red important style usesiwgen3 oktautil defines a global oktautil javascript object that contains methods used to complete the okta sign in flow when an app uses the sign in page to sign a user in information called request context is available the request context describes the target app and the request use request context by calling the oktautil getrequestcontext method javascript code on your sign in page can do the following inspect the current request act based on the target app or other details identity engine users get the following object returned from oktautil getrequestcontext app type object value name sample_client label demo app id 0oadday782xulhyp90h3 authentication type object value request max_age 1 scope openid display page response_type code redirect_uri https example com enduser callback state vqpcuggcsykbwucfnqhlsehajvi5en1xxtywwxfigsxq0bvesnkmh4gscswtuhpa code_challenge_method s256 nonce i2q3rga3fpgx3f9yfuglkc0pdzzrb8todsojfwmzscch6hi4dhixgl6pnfj0pyuo code_challenge c0bflxeyh61aweyznlh jszp55ujtjqxgahxbch lo8 response_mode query protocol issuer name default uri https youroktadomain oauth2 default classic engine users get the following object returned from oktautil getrequestcontext target clientid 0oadday782xulhyp90h3 name sample_client label demo app authentication request scope openid response_type code redirect_uri https example com debug state asdf response_mode form_post client name demo app id 0oadday782xulhyp90h3 issuer name default id ausblkmh242vtu5430h2 uri https youroktadomain oauth2 default for an openid connect app the app s client id is stored in the request context object and is retrievable using the following commands identity engine oktautil getrequestcontext app value id classic oktautil getrequestcontext target clientid there s more information available about the client app such as label note the getrequestcontext method only returns a value when the okta hosted sign in page is loaded in the context of an app for example sp initiated flows in saml or the authorize route for openid connect otherwise it returns undefined see per application customization for an example of what you can do with request context note the following variables are only available when the theme builder feature is enabled in your org themedstylesurl inserts the url for the themed style sheet example link href themedstylesurl rel stylesheet type text css faviconurl inserts the url for the favicon example link rel shortcut icon href faviconurl type image x icon hide or suppress the transient sign in widget in okta identity engine the sign in page uses a javascript redirect method instead of http 302 there are two main impacts visual the okta sign in widget could appear briefly to end users during the transition interrupting the custom branded experience programmatic non user or back end authentication flows receive an http 200 ok response with a body instead of an http 302 found redirect status response as a result back end coding doesn t detect the status response and the javascript method performs the redirect resolve the visual impact to suppress the brief appearance of the sign in widget use a custom domain and update some javascript css required in the html header add the following to remove the opacity of the okta login container style okta login container opacity 0 transition delay 200ms transition opacity 500ms webkit transition opacity 500ms safari style optional you can add more context for the build out in the html header as part of the javascript code block add the following var mycontext isloginhidden true required in the html body add the following to access the query string in javascript and to toggle the display based on presence get the login container var logincontainer document getelementbyid okta login container utility get a query string parameters var urlparams new urlsearchparams window location search detect the idp param if urlparams has idp console log urlparams get idp just to capture if more logic needed let the default opacity remain else allow the login container to be seen logincontainer style opacity 1 mycontext isloginhidden false optional if more logic needed would not set opacity optional you might need more context and there isn t any display of the sign in widget at the bottom of the page in the html body add the following if mycontext isloginhidden make sure the login is displayed by default console log show the login indicate login should not be hidden just in case it renders again mycontext isloginhidden false show the login container logincontainer style opacity 1 solutions for the programmatic impact consider alternative integrations within your app since the idp is known you can redirect for idp verification for all authentication flows or use the web finger api however your integration may be limited based on context note in identity engine app sign in policy rules opens new window include conditions about the device platform and the target app the webfinger api doesn t include device and app details in its responses style for embedded authentication this section discusses the customization options that you have when you re self hosting the sign in page initial sign in page you can modify the look of the initial sign in page using parameters in the config section of the main initialization block logo var config logo path to logo png var signin new oktasignin config custom buttons you can add buttons below the sign in button var config custombuttons title click me 1 classname btn customauth click function clicking on the button navigates to another page window location href http www example1 com title click me 2 classname btn customauth click function clicking on the button navigates to another page window location href http www example2 com links you can also change the help forgot password and unlock links including both their text and urls var config helplinks help https example com help forgotpassword https example com forgot password unlock https example com unlock account custom text what is okta href https example com what is okta text example portal href https example com modify the css in addition to the parameters in the config of the sign in page you can also modify the css or override the default styles this section provides examples that you can use to make your own customizations to the sign in page background okta sign in auth container main container background color red okta sign in beacon blank background color red border color okta sign in auth container main container border color red okta sign in auth container okta sign in header border bottom color red text color all text okta sign in color red sign in text okta sign in auth container o form head color red link text okta sign in auth container a link link color red widget positioning width width okta sign in width 600px position okta sign in margin 100px auto 8px identity provider buttons okta sign in auth container custom style background url logo png no repeat 10px linear gradient 90deg hotpink 50px lightpink 0 modify strings to modify strings on the sign in page you can override any of the properties set in login properties opens new window override these properties by adding new values for them configure the i18n object in the config section of the sign in page you can add values for any of the labels found on the sign in page var config i18n en labels primaryauth title exampleapp login primaryauth username placeholder exampleapp id primaryauth username tooltip enter your exampleapp id primaryauth password placeholder password primaryauth password tooltip super secret password errors error username required please enter an exampleapp id error password required please enter a password errors e0000004 sign in failed for more information about these configuration options see the okta sign in widget reference page opens new window localization if you want to display different strings depending on the user s language you can specify this using the following structure lang key value lang one of the i18n country abbreviations opens new window key a string specified in login properties opens new window value a new value for that string example var config baseurl https youroktadomain i18n en primaryauth title sign in to exampleapp es primaryauth title iniciar sesión en exampleapp zh cn primaryauth title 登录 exampleapp zh tw primaryauth title 登錄入 exampleapp host your own language files the i18n option lets you override specific strings in languages that sign in widget already supports if you need to support a language not in the default list or want to serve language files from your own server instead of the okta cdn use assets baseurl and assets languages assets baseurl the base url where your language files are served the sign in widget loads labels json login_ lang json and country_ lang json relative to this path assets languages the list of language codes that you re hosting this replaces sign in widget s default supported languages list if a requested language isn t in the list sign in widget falls back to en var config baseurl https youroktadomain assets baseurl https acme com assets dist languages en ja fr var signin new oktasignin config notes the language json source files are in the dist labels json folder of the okta okta signin widget npm package opens new window hosting your own language files is also supported in the gen3 sign in widget used with redirect authentication see style the sign in widget third generation customization examples use the following examples to help you customize the sign in page with your own css scripts and per application branding add your own style sheet you can add your own style sheet to extend the look of the sign in page in the embedded html editor add a link to your style sheet in the head section below the signinwidgetresources line example head meta http equiv content type content text html charset utf 8 meta name viewport content width device width initial scale 1 0 meta name robots content none title pagetitle title signinwidgetresources custom styles for your sign in page link rel stylesheet type text css href http example com yourcustomstylesheet css head add your own scripts you can add custom javascript code to the sign in page in the embedded html editor add a script in the head section below the signinwidgetresources line example head meta http equiv content type content text html charset utf 8 meta name viewport content width device width initial scale 1 0 meta name robots content none title pagetitle title signinwidgetresources add your scripts here script src https example com yourcustomscript js script or inline scripts script do something script head per application customization the sign in widget for embedded authentication is app aware this means that your client side customizations can understand which app caused the sign in page to load this is useful when you have multiple apps or brands that you want to support when the page renders an object called oktautil exists on the page by calling the oktautil getrequestcontext method scripts on the page can get details about the current request to access the app s id which uniquely identifies the app write a function to safely get the app id from the request context identity engine script function getappid if oktautil return undefined var requestcontext oktautil getrequestcontext if requestcontext requestcontext app requestcontext app value id return requestcontext app value id script classic script function getappid if oktautil return undefined var requestcontext oktautil getrequestcontext oidc apps if requestcontext requestcontext target requestcontext target clientid return requestcontext target clientid saml apps if requestcontext requestcontext authentication requestcontext authentication issuer id return requestcontext authentication issuer id script note for classic engine orgs it s not possible to retrieve the app id for secure web authentication swa or bookmark apps from the requestcontext using this method inspect the app id and modify the widget configuration or appearance when users sign in to the target app for example if you have a css file on your server that s for a particular openid connect client s css in the admin console go to applications applications select the app integration that you need the client id for on the general tab copy the id from the client id box in the client credentials section script var appid getappid if appid 00exampleclientid add application specific css var head document head var link document createelement link link type text css link rel stylesheet link href https example com styles appid css head appendchild link script enable sign in widget features on the okta hosted sign in page the okta hosted sign in page sets default feature flags opens new window on the sign in widget that are required for certain flows to work correctly for example the password reset email link flow depends on default feature settings that okta configures at runtime to enable or disable a feature use the oktautil getsigninwidgetconfig method to retrieve the existing config object then set the individual feature property on it use the bracket notation config features featurename or dot notation config features featurename to target a single flag var config oktautil getsigninwidgetconfig config features registration true or config features registration true then pass config to oktasignin as usual caution don t override the entire config features object assigning a new object to config features for example config features registration true removes all of okta s default feature settings and can break flows such as the password reset email link always set individual feature flags as shown earlier about the sign in widget version the okta hosted sign in page uses the sign in widget opens new window component to interact with the user if you aren t familiar with the sign in widget okta recommends that you select the highest major version and the latest minor version default for details major and minor versions and the sign in widget capabilities they support see the github releases page opens new window to update the major and minor versions select edit in the okta sign in widget version section header make your changes and then click save at the bottom of the page see also for information about other okta customization options customize domain and email address customize the okta hosted error pages customize sms messages customize email notifications test your widget s ...