This blog post is based on the OKTA samples @ https://developer.okta.com/quickstart-fragments/angular/default-example/ and the OKTA sign in widget that can be integrated into the page.
- You can find checkins related to this blog in the following branch: https://github.com/TomTyack/jssokta/tree/feature/okta-sign-in-widget/JSS
- The original repository can be found here: https://github.com/TomTyack/jssokta
- You may find it useful to follow the instructions in Blog 1 to get setup first.
- The OKTA samples makes use of the OKTA Angular SDK. You can setup your own development OKTA cloud instance for free allowing you to test the example.
The branch mentioned above contains a working example that I will now run through in the rest of this blog. Once up and running your should get a login embedded into our JSS application that allows us to login via OKTA.
Firstly lets have a quick run through of the changes we made to the first blog in order to integrate the widget.
- OKTA configuration settings
- These are stored in a settings file in the root of the JSS application: jss-okta-config.json
- All settings to do with our OKTA instance can be added in here.
- scripts/generate-config.ts merges this file into the environment file for use throughout the application.
- The main changes this time around were the addition of our route paths.
- “portalRoute”: “/profile”, “loginRoute”: “/login”, “logoutRoute”: “/logout”
- Create the placeholder component to contain the widget
- In JSS we scaffold up a new component
- Have a look at https://github.com/TomTyack/jssokta/blob/feature/okta-sign-in-widget/JSS/src/app/components/okta-sign-in/okta-sign-in.component.ts
- Note how the code dynamically imports the OKTA sign in widget.
- This is necessary as the library contains a reference to window. Which will break our Server Side code if imported normaly.
- So in order to workaround this flaw we dynamically import the library only after verifying that this code is running client side.
- Wait for the dictionary service to be loaded so that we can inject the Dictionary into the form.
- Initialise the OKTA widget configuration, inject labels and URLS
- Render the widget
- This contains the widget code and the has a matching from end HTML template in Angular.
- The HTML file contains the following important tag
- <div id=”okta-signin-container”></div>
- Add the component to the /login route
- This is done via a one-liner:
- componentName: OktaSignIn
- Adjust the navigation to include a new button for the widget
- Dictionary additions
- We added the Widget Title and the Button Text, so that they are content editable
To show you a video of this JSS example in action take a quick gander at the following video:
- Clone the Repository
- Switch branch to feature/okta-sign-in-widget
- Deploy the application. Follow the same instructions from the first blog. <<< UPDATE LINK
- Run the application. Follow the same instructions from the first blog. <<< UPDATE LINK
- Click on the “Login Embedded” link in the navigation
- Login to OKTA (if not already) using the details you registered with.
- You should arrive back on the profile page
- Success!! hopefully 🙂
- Inside the OKTA Dashboard is a handy log that shows all login activity. This is a great way to see what is going on. Screenshot shown at the bottom.
That concludes the run through of how to integrate the OKTA Angular SDK and Embedded Widget into Sitecore JSS. OKTA is a leader in user authentication management and having the ability to integrate into our JSS applications is an exciting prospect. I hope this example is of use to you and your teams if your considering the same technology mix.