Customizing Okta login flow (messages, controls, logos, bk img, styles and more)

 

Here's the Okta Dev Guide to customizing Okta login pages

You can customize lots of properties including customizing UI, Email and sms logo, labels including i18n string translations. Okta provides a dashboard to customize flow as well as manage people, workflows etc.

  • logo, background image and theme; easy to customize in Settings -> Appearance
  • emails; in Settings -> Emails & SMS
    • have to edit a version of each email for each language you support and manually enter the text for each country!
  • UI Screens;  Customize in Settings -> Customization.  Includes these flows
    • signin flow (incl mfa flow)
    • mfa setup flow
    • password reset flow
    • account unlock
    • ...but most customizations are done for these pages in css styles and javascript (see below)
  • unlike emails there is no editor where you can edit each page. Instead you have to customize the pages through javascript and css. This is what you'll typically change and how:
    • hide control
    • reposition
    • add controls
    • change text messages
    • add new text messages
    • change error handling UX
      • add new
      • move
    • add validation check e.g. email only on signin
    • styling changes
  • testing, first have to setup a Custom URL domain, then can make UI changes, save and test
  • ui error page
    • see this help
    • but big question: can I add my own custom internationalized strings? Answer: translated strings not available through the normal Okta ia8n file. So would have to do in javascript.
  • big issue: no workflow support in the okta tooling; no way to programmatically promote code (emails, configs) from QA to Prod. Have to copy'n'paste manually unless create own custom migration. Unfortunate product gap
    • update: we used terraform to configure and push email templates to the Okta qa and prod instances; wrote some package.json script commands to run
    • must install terraform using brew or similar
      • brew tap hashicorp/tap
      • brew install hashicorp/tap/terraform
    • then can run terraform commands locally

Approach
  1. understand the default okta flows
  2. compare to the changes your designer wants to make
  3. work on the changes and test, cross browser, multi language
  4. help the team understand all the details including flows and messages not thought of; error states etc.

How to build and test your customizations
  • You can clone, install and build the github Okta widget locally and test it
    • read the readme, has lots of good info on how to customize
    • I  installed this locally and it works pretty well, supports hot reloading so I would recommend this over the live widget (next bullet) for making and testing changes
    • instructions: https://github.com/okta/okta-signin-widget/#building-the-widget
    • not clear what node to use so I used v10 and yarn 1.21.1
    • I copied the .widgetrc.sample.js to .widgetrc.js
      • comment out stateToken property so you see the main auth page
      • set other values like i18n and features
    • saas is under /assets/saas and I put my changes at bottom of: _container.scss
    • put logo in /playground/img and then reference in the config: logo: '/img/mylogo.png',
    • this repo has all the widget code so you can get as deep as you like
    • I test it in Safari with CORS disabled
    •  
    • The Okta widget is written in Backbone
    • All the routes (~50) supported are in LoginRouter.js
    • When you move around the pages you can see the browser url change

  • You can also use their developer playground to make and see widget changes live
    • this is quite useful to play around with and there are tabs to allow you make javascript changes (e.g. to the config) and css changes
    • supports live edit as you make changes
    • I just added my css changes/overrides at the bottom of the saas file tab
      • I loaded our preferred fonts in the sass file
      • most styles targeted under "#okta-sign-in.auth-container"
    • but it can get stuck not hot reload and when you reload the url changes ....so save all your changes
  • recommendation: put css in a file and include in widget (versus inlining it); will be easier development process
  • recommendation: study the structure of the widget css so that you can better understand how to override it in a more comprehensive manner
References
  • docs customize the hosted okta ui experience 
  • docs customize emails and sms
  • more email docs
  • okta widget github:
    • read the readme, has lots of good info on how to customize
    • https://github.com/okta/okta-signin-widget/#language-and-text
    • https://github.com/okta/okta-signin-widget/blob/master/packages/@okta/i18n/src/properties/login.properties

Comments

Post a Comment

Popular posts from this blog

deep dive into Material UI TextField built by mui

Image
The Material Design system is a design system used to create consistent digital experiences across platforms such as android, web and ios. Includes: a color system a typography system a shape system a grid system it addresses motion and lots more Also includes Material Theming which makes it easy to customize Material Design to match your brand. Material Design is not just a set of guidelines it is a whole ecosystem. Material itself stopped maintaining it's react implementation and recommends opensource versions.  A very popular open source implementation is  MUI ,  a react component library  built to implement Material Design . Bills itself as the "worlds most popular React UI framework" and at this time has 1.2M weekly downloads on npm and used by over 750k projects on github (did I mention it's very popular?).  Note: there are other react component libraries implementing bootstrap and ant design for example, so up to you and your design team on what you choose. 
Read more

angular js protractor e2e cheatsheet

Many from the protractor test suite category detailed task syntax example load page load a page browser.get('yoururl') browser btn actions browser back/forward browser.navigate().back() OR browser.navigate().forward() access elements on page See Protractor API list and examples from Protractors test suite access by angular ngmodel name (must match ngmodel in the html) this is the preferred approach element(by.model('person.name')); access by the css id on the page e.g, #user_name (but this can be brittle) element(by.id('user_name')) access angular binding to get generated value i.e. for {{}} element(by.binding('person.concatName')); access angular repeat list data (must match repeat stmt in the html) See Protractor test suit l
Read more

react-router v6.4+ loaders, actions, forms and more

react-router  react-router is used for in app single page app navigation, we configure routes for pages in the app to map to components react-router has over 1bn downloads, its an industry standard (but there are others e.g. Nextjs router) many apps use react-router, many on v5.x the new react-router 6.4.x the newest major version of react router v6.4 is a significant enhancement which adds a lot of new features. react-router v6.4 offers new features to load data (loaders) and handle actions (actions).  It's done gone all Remix-y which makes sense because the same guys wrote both. eliminates a lot of boilerplate code to fetch data in useEffect() and set various loading states put your data load and update logic in react-route components instead of custom code unlike Remix, react-router v6.4 is still just all on the client (not server like Remix) paradigm shifts Lets start with a couple of high level ideas; "back to the future" so to speak OR "what's old is new ag
Read more