Per the instructions, I added the CDN links for version 3.2.0 of the Sign-In Widget to my HTML page. Next I added a <div id="okta-login-container"></div> and the example <script> block, replacing the placeholders yourOktaDomain and clientId with the appropriate values.
On load, the JavaScript console logs an error:
(index):21 Uncaught TypeError: Cannot read property 'hasTokensInUrl' of undefined
In the JS console, I can see that the oktaSignIn object does not have a property named session, as the sample code seems to expect.
The code I’m referring to is under the heading “Configure the Sign-In Widget” and begins with the following lines:
<script type="text/javascript">
var oktaSignIn = new OktaSignIn({
baseUrl: "https://${yourOktaDomain}",
clientId: "{clientId}",
authParams: {
issuer: "https://${yourOktaDomain}/oauth2/default",
responseType: ['token', 'id_token'],
display: 'page'
}
});
if (oktaSignIn.token.hasTokensInUrl()) {
oktaSignIn.token.parseTokensFromUrl(
When I tried to use this sample code it failed with the error I reported. Perhaps this is due to a change in the public API of OktaSignIn since that example was written.
Thanks for the assist, that was my issue as well and is now fixed. It would be good to have this documentation page updated to the suggestion above to responding to the API change:
@mraible this still doesn’t work for me. Before this fix the login didn’t show at all - with this fix I get a 400 error response when logging in
Error Code: invalid_request
Description: The ‘redirect_uri’ parameter must be an absolute URI that is whitelisted in the client app settings.
The redirect URI is, as specified in the guide, window.location.origin + "/implicit/callback". This logs localhost:3000 as it should
When you see the 400 error in your browser, go to your address bar and look for the redirect_uri parameter that your app is sending. You might want to copy/paste the URL into a text editor so it’s easier to find. If you add this value to the Login redirect URIs in your Okta app, you should see the login form on Okta. At least, that’s how I solved it in the past.
However, when I attempt to sign in with the widget, I receive a 400 error response similar to @talents. When I look at the address bar, my redirect_uri seems to be http://localhost:8080
When, I update the url so that the redirect_uri looks like this: redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fauthorization-code%2Fcallback
I am redirected to the appropriate screen in my app.
Justin, can you also add http://localhost:8080 as a login redirect uri for your app in Okta? The Redirect URI in the /authorize call (so the one you see in your address bar) MUST be an exact match (case sensitive) with one of the ones listed in Okta.