Add Authentication to Any Web Page in 10 Minutes

Laura Robichaux

thank you

Deshan

Yes! good site

MD

Hello, Thanks so much for this! It’s so helpful!! :slight_smile: I’m quite new to development but managed to get this working. I just wanted to ask where I could put in the rest of my html website code so it’s not accessible when not logged in? Really sorry if this is a silly question. The only place I could think is within the messagebox that says “You’re still logged in” but I dont trust my gut. A little help would really be appreciated. Thanks so much!

1 Like

Matt Raible

Hello MD!

This is a good question, and I’d like to answer it for you. Can you please post it to our developer forums and tag me (@mraible)? That way, more people will see it and be able to give you advice.

Welcome to the Okta Developer Community! :blue_heart:

1 Like

Deconfusion

Hi Randell,

I’m having trouble with this as well, any help you could provide would be very welcome.

1) The sign-in modal appears added to my site (e.g. rendered with the rest of the site content), instead of replacing it, as in the example. I tried putting the okta container <div> in a couple of different places: directly beneath the <body> and one level down in the DOM, under my primary container <div>, with the same results. What are the rules about where the okta container needs to go?

2) When I actually log in I get the Okta 400 error page with the following:

Identity Provider: Unknown
Error Code: invalid_request
Description: The ‘redirect_uri’ parameter must be a Login redirect URI in the client app settings: https://dev-13736929-admin…

The login redirect URI is set to http://localhost:8080

MD

Thanks so much, Matt! I’ve just sent the question there! Appreciate all your help! Hope to get your input soon!

1 Like

Artash Mardoyan

Hi Matt Raible, we have a dashboard written by REACT and NODE.
We need to add our dashboard to OKTA app like slack, bitbucket.
Can you suggest scenarios?

Matt Raible

Of course! Please edit your question above to ask a question and I’ll change this reply to an answer. :slight_smile:

1 Like

Artash Mardoyan

We have a problem with the integration of Use PKCE (for public clients) on Single Page Application(React).

We did the steps described.
PKCE integration overview

After the redirection from OKTA sign-in page to our callback route(on REACT app).
We successfully get code and state from OKTA’s query params.
OKTA’s callback URL.

But when trying to exchange the code from the callback URL for tokens we get CORS ERROR.
> Exchange code for tokens.

We added our app URL (http://localhost:3000) to TRUSTED ORIGINS but still get the same problem.

Matt Raible

Since you asked this same question on our forums, I’ll try to answer it there.

1 Like

Pawan

I want to know where I could put in the rest of my html website code so it’s not accessible when not logged in? If I use window.location.href = “token.html” with the code where it says document.getElementById(“messageBox”).innerHTML = "Hello, " + idToken.claims.email + “! You just logged in! :)”;Thanks.
then I am redirected to another page token.html but no session is maintained in this new page. Also, It will not be SPA then. I want to display bunch of text boxes (e.g.) when user logged in successfully otherwise not in the main page (index.html). A little help would really be appreciated.

Matt Raible

Don’t try to do something like this with a plain HTML page and jQuery. That’s how we did things in 2008. I’d recommend checking out one of the following videos to see the JavaScript frameworks we support.

- Angular: https://www.youtube.com/wat…
- React: https://www.youtube.com/wat…
- Vue: https://www.youtube.com/wat…
- React Native: https://www.youtube.com/wat…

Pawan

Can you let me know how to do it for php application? I have index.php as main page and I am trying to load token.html when okta authentication is successful inside index.php.

naga manikanta

Hi kendall,
Could you please share the code it would be help for everyone.

reetika shukla

Hi @mattraible i tired with 10m-4.3.0.html
but it’s showing me error : "There was an unexpected internal error. Please try again."
Can you please tell me what the issue?

reetika shukla

Hi @rdegges i tired with you approach but it’s showing error “Unable to connect to the server. Please check your network connection.” Can you please tell me what is the issue?
I tried with different systems still it’s showing me the same. Thank you

Sergio Lara

Hmmm mine fails as soon as the user passes MFA. Any pointers would be great.
Thank you

Sergio Lara

Running it off of IIS. When I access it on the server with Localhost:8080 it works great, but when i access it with the IP nothing happens when I accept the MFA. I have both local and the IP as a URL and in the API settings.

Charles Miller

You’ll get this if you don’t include the scheme with your base URL, i.e. dev-12345.okta.com rather than https://dev-12345.okta.com. It’s not obvious if you copy the url from the admin screen, but might be there if you copy it when you create it, I don’t know.

1 Like

Md Ashraf Rahi

Python is an interpreted, object-oriented, high-level programming language with dynamic semantics. … Python’s simple, easy to learn syntax emphasizes readability and therefore reduces the cost of program maintenance. So python is high demanding language . if you join to learn python program language. Delhi NCR is following highly effective delivery model of instructor-led live online classes with the facility of 24X7 also three lifetime access to all the course content.