Registration, Okta-SignIn-Widget, Angular, Email-Verification

Questions
1

Dear Okta team,

I am developing an Angular single page application that uses the Okta-SignIn-widget. The login/logout works. However, I have a problem with the registration process. To narrow down the problem, I use your Okta example “custom-login” from GitHub: samples-js-angular. I can register via the widget. I receive an email from Okta with a link and a code. I then click on the link, a request is sent to Okta and Okta calls my application in the browser via a redirect. The URL corresponds to the callback URI that I have set up in Okta under “EMAIL VERIFICATION EXPERIENCE” and looks like this:

http://localhost:8080/custom-login/login/callback?state=ryEnzskZO6TRLha4LeGVOfDRVqduxFW6HFHJqT6gf4uf987pu1a5KXxQXwkl5RDn&otp=266037

The URL therefore contains the query params state and otp. The application starts and calls the OktaCallbackComponent as defined in the routing of the Angular app:

{
    path: 'login/callback',
    component: OktaCallbackComponent,
},

but then nothing happens. No excepetion on the console, no error.

Screenshot 2024-02-21 134043
Screenshot 2024-02-21 134043991×505 6.29 KB

Here are my questions:

  • Am I missing something?
  • Is it right to route to the OktaCallbackComponent in this case? Or should I refer to my LoginComponent?
  • There are examples in which the otp and state parameters are read within the LoginComponent and used for the SignInWidget. Like this:
const searchParams = new URL(window.location.href).searchParams;
this.signIn.otp = searchParams.get('otp');
this.signIn.state = searchParams.get('state');

I have done the same. Nevertheless, the login does not work.

2

To answer you questions,

  • Is it right to route to the OktaCallbackComponent in this case? Or should I refer to my LoginComponent? No, this is intended for a different purpose (To handle authorization code callback and exchange it for tokens)

As far as documentation of examples, your email verification callback URI should read the query string parameters and add it to sign in widget configuration before initialization

var signIn = new OktaSignIn(
  {
    issuer: 'https://{yourOktaDomain}/oauth2/default',
    clientId: '{{clientId of your OIDC app}}',
    redirectUri: '{{redirectUri configured in OIDC app}}',
    state: '{{state from URL}}',
    otp: '{{otp from URL}}'
  }
);

If this does not work, you might have to state what error you are getting.

1 Like
3

Thank you Ram,

one step further.

After using the link in the verification email, I get this screen:

Screenshot 2024-02-22 120057
Screenshot 2024-02-22 120057620×708 26.1 KB

Something still seems to be missing

4

You might be hitting this scenario.

Okta will continue with next steps if you do this on the same browser without clearing data. If not, you will be shown a message to go back to your original tab and enter OTP. This is explained in the article I attached above.

1 Like
5

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