Add Authentication to Any Web Page in 10 Minutes

lalov1

If I login to Okta then go to the page it works, but if I use the login on the page it doesn’t. What am I doing wrong? https://my.uiw.edu/ird/okta…

Deepak

Hi, thanks for your information but i want to implement using google for login for react native application can you please provide code or steps to implement it into react native application…

Matt Raible

Hello Deepak,

Your question is a bit out of scope for this blog post. We have a post on how to build a React Native Application and Authenticate with OAuth 2.0 that you might find useful. You can find instructions on how to add Google to your Okta hosted Sign-In Widget here.

Avishay Guttman

Is it safe to expose “client_id” to the client?

Matt Raible

Yes. The client ID is like a license plate number. It’s just an identifier.

Bah_Humbug

Hello, in my view I followed this guide to the letter. I can see the login prompt, but when I attempt to login I get the web page error:

400 Bad Request.
Identity Provider: Unknown
Error Code: invalid_request
Description: The ‘redirect_uri’ parameter must be an absolute URI that is whitelisted in the client app settings.

In the OKTA console I see for the same login event:

OAuth2 authorization request
failure : illegal_redirect_uri

I also have an API Trusted Origin that is the same as the URL I am attempting to login from.

Thoughts?

Bah_Humbug

Issue solved. My base URI was incorrect.

Instead of using: http://localhost:8080
I used: http://localhost:8080/login.html

Matt Raible

Thanks for letting us know how you solved it!

Rejith Kumar

Hi

I tried this code, however its always going to the else section and am unable to get Token .
Is there any way to get Token?

Appreciate your help

Matt Raible

Are you using the same version of the Okta Sign-In Widget that this post uses? If you’re using 3.x, things have changed a bit. I created an issue for this and created examples for implicit flow and auth code flow with PKCE. I hope this helps!

Billy Herrera

Hello,

I seem to keep running into the issue where similar to another user, I have the “failure : illegal_redirect_uri” error in system logs. Oddly enough, when I sign into my localhost, I get an error 400, but if I press back and refresh, the successful login message appears. Here is a short video of such - an odd inconvenience that it gets me an error and yet doesn’t work.

https://www.youtube.com/watch?v=WwjEsiAMVXQ&feature=youtu.be

Not much was changed between the source code and my own besides the title of the tab and body information.

Anuj Kumar

Failed to load resource: the server responded with a status of 405 (Method Not Allowed) api/v1/authn. I was trying to use this on static website hosted on aws S3 . but it seems chrome is allowing some OKTA js to run. api/v1/authn method was not allowed to run fromhttps://ok1static.oktac… . Any help would be appreciated

Matt Raible

Hmmm, are you using the same versions of libraries that this tutorial uses? If so, does it work locally?

Anuj Kumar

cross origin request not allowed . Though i enabled them from cors management …still it does not allow the ajax call

Matt Raible

Did you add your AWS URL to Okta? It’s under API > Trusted Origins.

Anuj Kumar

you need to setup redirection url in your OKTA SAP ,which will open once auth is complete.

Anuj Kumar

yes ! address of the S3 bucket. but …that comes later. The request itself is not going out from the client. any idea how to allow cross origin requests . CORS is enabled in AWS and Okta SPA as well but it seems browser itself is somehow detecting the call and suppressing.

Anuj Kumar

I got this working. Can anyone please help me with closing the user session as well. User session is active for quite some time. I want user to authenticated everytime he visits the webpage. Just like sign in method described above …is there any signout method as well? Thanks in advance

Ferik Brahim

Hello everyone,i wanted to login but every time it showed the same error, the error is shown in as follows
Unable to connect to the server. Please check your network connection
in inspect element: like this=Access to XMLHttpRequest at 'https://dev-616126.okta.com… from origin ‘null’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Matt Raible

Make sure you’re running a web server to serve it up locally. It won’t work if you’re just pointing to a file.