So my task at work is to Roll My Own Okta Sign In Component. That component will be written using React and its state will be managed with Redux.

That I have so far. What’s next? There’s the OktaSignInConfig that goes in tandem with the normal Okta Signin Widget. This config file has code in it to create a proper query string for our redirects coming in from other websites that aren’t our “SSO” login site.

There’s also some i18n strings set up in here, primarily the title for the sign in page. And there’s more json alongside these translations that handle the logo, again the redirect URI, the okta ClientId, some nonce, and other authParams that are needed for the signin.

I guess from here my next steps are to explore the okta signin widget repo on github. There I will find the javascript code they use to do the whole shebang. And I can find out what those OktaSignInConfig values map out to and possibly make my own calls with special handlers written for each specific signin use case. The okta signin widget can be found here:

https://github.com/okta/okta-signin-widget

These are the features and use cases the sign-in widget supports. This was taken directly from the Okta high-level overview page.

Features

The Sign-in Widget supports the following use cases:

  • Authentication: In addition to standard credential validation, the Okta Sign-In Widget also handles validation of password complexity requirements and will display common error messages for things like invalid passwords or blank fields.
  • Multi-Factor Authentication: The Widget also handles enrollment and verification of multiple authentication factors. It comes with built-in support for SMS authentication, security questions, and Google Authenticator, among others.
  • Self-Service Password Reset: Support for sending reset notifications as well as prompting users to verify themselves by prompting them to answer a security question.
  • Password Expiration: The Widget can notify users when their password has expired and prompt them to update their password before allowing them to sign in.
  • Validation and Error Handling: Extensive support for validating user input as well as handling every imaginable error condition which might occur in a user login flow.

I’ve been meaning to get the sign-in widget working with one of my original side project ideas, http://memelockerz.com.

Oh, and it looks like I did have the sign-in widget loaded in. It just wasn’t working correctly. If I remember correctly it had something to do with the callback URI that you have to set it up with. It also could possibly not work due to memelockerz.com not having an SSL certificate. Oh well, I’m getting a bit into the weeds here. I will end up using Let’s Encrypt for this SSL business as well.

Well I will have to come up with something tomorrow!


I had unpublished this post because I found the exact thing I was looking for in the Okta documentation. Here:

https://okta.github.io/code/react/okta_react#create-a-custom-login-form

But now I am going to do my best to publish and mesh this blog post with the instructions that were laid out there.

It might honestly just be a very minor tweak. There’s only one line in this okta tutorial that I’m really missing. The rest is just logically hooking up the Redux store in the background…for what seems like shits and gigs at this point, but whatever.

Well I think it works on local. There was a bit more config to set up. And I worry that I’m copy and pasting too much code into this. But I can’t push and test it out on QA yet. So I will have to wait and see.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.