Sign-in widget quickstart guide does not work?

Questions
1

Hi There,

I’m pulling my hair out trying to get any of the quickstart guides to work. All I want is a website which is effectively gated by the Okta Sign-in widget. If you are not signed in to Okta you can’t access website, if you sign in using an Okta account you can access the website.

It’ll be a PHP website so the obvious choice is this guide:

However nothing really works! The first hurdle I come across is this error setting up the Sign-in widget using the example front end code:

Uncaught TypeError: Cannot read property 'hasTokensInUrl' of undefined

caused by the line:

if (oktaSignIn.token.hasTokensInUrl()) {

Doing some googling I found this post which gives some alternative code for the oktaSignIn object:

This stops a lot of the errors and it appears I get logged in and the id_token, state, bearer etc get passed back in the url starting with ‘#id_token=’ after my url.

That brings up another error:

token.js:654 Uncaught TypeError: e.indexOf is not a function
    at b (token.js:654)
    at Object.parseFromUrl (util.js:70)
    at (index):92
b @ token.js:654
(anonymous) @ util.js:70
(anonymous) @ (index):92

If I comment out the code about tokens, then the rest of the code works within the section:

oktaSignIn.authClient.session.get().then(function (res) {...

So I get a console log of ‘Welcome back, xxxx’

It seems other people also have this issue:

So the big question is - is there actually an example or start up guide for the sign-in widget that actually works?? Can I confirm that it’s not me, and that I’m not going crazy but the official docs and getting started guides are broken?!?

Cheers,

Tom

2

Take a look at this github issue for more details. I believe @mraible got it working with some tweaks. See comments - https://github.com/okta/okta-signin-widget/issues/947

3

Hi @arhinostorm, sorry to hear this isn’t going well :confused:

Have you taken a look at the sample applications that we have here: https://github.com/okta/samples-php/tree/develop/okta-hosted-login ? They might help show the correct usage.

4

Thanks @vijet and @mraible that’s fixed the JS side of things. I’m now trying to plug this in to the PHP side of things.

Got to say that I’m really surprised that the official quick start guides are wrong. As someone new coming to Okta it’s been a really difficult and frustrating experience. The quick start guides are surely the first thing people new to Okta will look at and it must take all of 10 minutes to update the website.

5

You’re right @arhinostorm! I spent 10 minutes and created a PR to fix it.

1 Like
6

@mraible much appreciated. Very glad this forum (and you for that matter!) exists.

@robertjd thanks for that, was very useful. I’ve now managed to get what I wanted working (a PHP site gated by the Okta sign-in widget) by picking apart another example - https://github.com/okta/samples-php/tree/develop/custom-login. I wasn’t really aware those examples even existed though so once again, thank god for the forum!

In terms of me picking apart that example… I’m going to be using a wordpress site, not a pure PHP site (yes, yes I know). Having to unpick the twig stuff wasn’t that hard, but I (sort of) know what I’m doing. Again as an initial experience it wasn’t ideal. I had issues with JwtVerifier side of things and upon googling had to install and set an adapter which fixed it.

Not having a go or trying to be an arse, just flagging these things, as generally when I find a new tool online I don’t want to have to think too much initially, I just want to run through some examples and have a play around. Having working quick start guides for basic JS and basic PHP would be a very useful thing.

1 Like
7

If you’re going to be using WordPress, you might want to checkout this blog post:

8

@mraible Thank you so much for your commit, I was on it since this morning, now it works ! Great.

1 Like
9

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.