Redirect to Login or Application After Activation

@jbd4jc Thank your for trying and all the extra details. I think you’re right about the “self service” menu. For some reason my app is disabled for self service access “This app is ineligible for self-service”.

The down side to this is my users hit a dead-end Okta page where my App is no where to be found.

Hi @tom I have modified my sign up code as below. I am using the nodejs okta sdk. I am also collecting the password. I have also modified the activation email link to what you mentioned. http://localhost:3000/activate?token=${activationToken}

Below is the nodejs code. What happens now is the user is created and already “Activated” and no activation email is triggered. How can I create the user with a password but not being activated automatically since in this flow the activation email with activationToken needs to hit the /activate route in my app as you mentioned for me to use the primary authentication with activation token api.

app.post('/usersignupokta', function(req,res){
  console.log('Sign Up Request Received...')
  var newUser = {
                  profile: {
                    firstName: req.body.profile.firstName,
                    lastName: req.body.profile.lastName,
                    email: req.body.profile.email,
                    login: req.body.profile.login,
                    mobilePhone: req.body.profile.mobilePhone,
                  },
                  credentials: {
                     password : {
                       value: req.body.profile.credentials.password.value
                     }
                  }
  };

client.createUser(newUser).then(user => {
  res.json({success : true, message : 'User Successfully Created' });
}).catch(err => {
    console.log(err.errorSummary);
    console.log('User Creation Failed');
    res.json({success : false, message : 'User Creation Failed. ' + err.errorSummary });
  });
});

UPDATE: It seems like if you create a user with a password with this activate: false option client.createUser(newUser, { activate : false }) using nodejs sdk, the user is in pending activation mode but OKTA does not send any activation email to the user in this case. This flow fails if there is no activation email. I also tried creating a user with no password and in that case the user is receiving the activation email fine.

Ok so I fixed the issue of automatic activation. by changing the following.
Before - client.createUser(newUser).then(user => {
After - client.createUser(newUser, { activate : false }).then(user => {

Now the user is in Pending Activation Mode in Okta Console.
Will update once I receive the activation email.

Finally happy to report that I have been able to successfully sign up, activate and redirect the new user to where they should land in my application without going to the dead end /app/UserHome in Okta.

Firstly, here is the flow, I made a quick video for better understanding. https://youtu.be/O9dk5E8Pyq4

Technology Stack - MongoDB, NodeJS/Express and Angular 5.

Redirection to your website will not work seamlessly if you are not collecting both the Password and Recovery Question upfront.

Below are the code snippets.

  1. After you get the data from your Angular form and the Sign Up button is clicked.

     this.signup.oktaSignUp(body).subscribe(res => {
            console.log(res);
            if(res.success){ //this is just an interceptor in angular to just access the success field in the res json
              //your api call was successful
              this.router.navigateByUrl('/signupsuccess'); //this the page with the green Activate button. 
            }
            else{
                  //user could not be created handle error
            }
          });
    
  2. This api hits node server where I am using okta node js sdk.

        app.post('/usersignupokta', function(req,res){
               var newUser = {
                          profile: {
                            firstName: req.body.profile.firstName,
                            lastName: req.body.profile.lastName,
                            email: req.body.profile.email,
                            login: req.body.profile.login,
                            mobilePhone: req.body.profile.mobilePhone,
                          },
                          credentials: {
                             password : {
                               value: req.body.credentials.password.value
                             },
                             recovery_question: {
                              question: req.body.credentials.recovery_question.question,
                              answer: req.body.credentials.recovery_question.answer
                            }
                          }
          };
    //client is the nodejs okta sdk initialized object !IMP {activate: false}
    client.createUser(newUser, { activate : false }).then(user => {
    //save the user in mongodb using mongoose. this is where you will see after signup the user status is STAGED
    //id and status is all we need. okta handles everything and I do not want PII data hitting my server.
        var myoktaUserData = new oktaUser({
                                                          id: user.id,
                                                          status: user.status
                                                   });
       myoktaUserData.save();
   }).catch(err => {
       //User Creation failed, send response back
            res.json({success : false, message : 'User Creation Failed. ' });
          });
       });
  1. When User clicks the green Activate button on the site here is what happens in node server.

     app.post('/activateoktaUser', function(req, res){
       console.log('In Activate Okta User, User ID: ', req.body.userid);
       client.activateUser(req.body.userid, { sendEmail : true }).then(oktares => { //IMP: {sendEmail : true}
       console.log(oktares);
       //update local MongoDB
       var conditions = { id: req.body.userid },
           update = {  status: 'ACTIVE' },  //since activation is successful updating STAGED to ACTIVE
           options = { multi: false };
       oktaUser.update(conditions, update, options, function(err, numAffected){
         if(err){
           console.log('MongoDB Update to Okta User Status Failed');
         }
         else{
           console.log('Documents Updated: ', numAffected);
           res.json({success : true, message : 'User Activation Successful.'});
         }
       });
       }).catch(err => {
         res.json({success : false, message : 'User Activation Failed. ' });
       });
     });
    
  2. Once Step 3 is done there is one more step left. Now the user should have received an email with the Activate link. In your Okta console you have to customize that link before the email goes out to something like this.

http://localhost:3000/activate?token=${activationToken} //this should NOT be activationLink as in default

  1. Once user clicks the email this link will hit your activate api endpoint. Lets see what happens there.
            app.get('/activate', function(req,res){
              activationToken = req.query.token; //token received from the activation email
          
          const options = {
            method: 'POST',
            uri: 'YOUR OKTA ORG URI//api/v1/authn',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'Authorization': 'YOUR KEY'
            },
            json: {
              token: activationToken
            }
          };

    //using request module to hit the POST endpoint, this is primary authentication with activation token
              request(options, function(error, response, body) {
                  if (error) {
                      console.log(error);
                  res.redirect('http://localhost:3000/home'); //redirecting to site home for now if error occurs, update to //relative path
          } else {
                    if(body.status == 'SUCCESS'){
                     /*auth succeeded I am redirecting the user to userdashboard component in angular. the awesome part is if you have oktaAuthGuard implemented for the component okta login will automatically take over from here as you will see in the video. After that the user just configures MFA and logs in and everyone is happy*/
                      res.redirect('http://localhost:3000/userdashboard');
                        }
                        else{
                      //if failed go home for now
                          res.redirect('http://localhost:3000/home');
                     }
             }
          });
       });

Let me know if I have missed something or done anything that is not done the right away. I am very new to node and angular.

2 Likes

Definitely looks right. Thanks for posting back here. Okta is still working on the solution to make sure everyone doesn’t need to rebuild activation to work with their app. Stay tuned.

1 Like

Thanks @tom for confirming and all your help.

+1 for this.

also please allow redirect for the reset password hosted page
The all point of using Okta is that we won’t need to implement our own welcome page, reset password, etc…

also, the reset password hosted page says “Reset your Okta password”. please allow to configure it as our users should not see the word “Okta” in this sentence…

The fromURI redirection works with both activation and reset password links. I use it to redirect users back to my OIDC app after activation and reset password flows.

${activationLink}?fromURI=https://myoidcapp.com and ${resetPasswordLink}?fromURI=https://myoidcapp.com

You will also have to add the app’s url to trusted origins.
Go to security -> API -> Trusted Origin -> Add Origin enable redirect (and CORS if you need)

Let Okta deal with password and security questions and on success redirect to my app
Hope this helps.

Thanks,

1 Like

The fromURI query parameter does not work for me when using it like you recommend. My users just end up on the user home page instead of being redirected anywhere else. Did you have to do anything special to make it work for you?

You will also have to add the app’s url to trusted origins.
Go to security -> API -> Trusted Origin -> Add Origin enable redirect (and CORS if you need)

I will update the previous answer for completion.

@tom any updates on this feature in okta?

2 Likes

@tom, for those who have the appetite of creating their own UI for the flow, can you breakdown the calls that take place in the Welcome page? We have a use case where we want to replicate the Welcome flow in our UI and redirect to one of our pages at the end.

The email link has the activation token.
The next step I believe is to call Primary Authentication /api/v1/authn with the activation token.
That call will return a state token.
Documentation states that " the response will trigger the workflow to set the user’s password"
The documentation there does not have an example of using the state token to change the password.
What about the security question/answer? Does that need a separate call to change it, or can both security question/answer and password be changed in one call?

The Welcome page currently does it, so it’s just a matter of making the right calls and it’s not well documented.

I am posting a solution that was provided to us by Kam Ahuja, the Okta architect we work with. Many thanks to Kam.

  1. Create a bookmark app and point it to the page where you’d like users to land post activation (applications > add application and search for bookmark)
  2. Assign this app to “Everyone” group (or use group rules to ensure it gets assigned to any new users that you’d like to be redirected to this page after activation)
  3. Find the embed link for the bookmark (browse to the app config in Okta, under general tab, at the bottom you’ll find the embed link):
  4. Copy the /home/… portion of the url and encode it
    E.g. encode /home/bookmark/0oa8au0r9dzZUvgTf0h7/1280 >>>>> %2Fhome%2Fbookmark%2F0oa8au0r9dzZUvgTf0h7%2F1280
  5. Update the User Activation email template to include a new parameter called fromURI parameter that points to the encoded url above. E.g.
Activate Okta Account

Now if you inspect the activation URL in the activation email, you’ll notice the new fromURI parameter and when the user finishes the activation, they’ll be redirected to the url defined under the bookmark app.

2 Likes

@ilako Thank you for the detailed steps. This worked exactly how you explained.

I also tried simply appending ?fromURI={my-uri-encoded-app-uri} and that also worked. So I don’t think the bookmark is absolutely necessary, at least not for my OIDC SPA Okta app.

1 Like

Hi, I’m new to oAuth world and I was able to take the okta-aspnet-mvc-example and apply your steps, but I noticed that once I activated the user, I was able to just login. So, how do I make sure the active user is not able to login without first confirming they received the email and clicking on the ‘Activate Account’ button?

Thanks in advance.

Dharmesh

1 Like

Having a single activation/verification template across Okta doesn’t really make sense.
You should be able to configure multiple self service registration flows, and assign these to apps.

Its very possible a single customer has multiple apps that require different registration information and different re-directs

1 Like

Hi, all!

If anyone is interested into achieving this flow but for Redirect to Login after the Reset Password instead of Activation, this is possible.

It will not function work while having the flag for Self Service Registration, that is automatically enabled on most of the orgs. With that flag turned off, the actual approach of having href="${resetPasswordLink}?fromURI=https://www.example.com" will actually function.

A needed step for this will also be to add the link to the Trusted Origins under Security > Trusted Origins and to have this function you will need to go to Admin Panel > Settings > Email > SMS & Email. On the Email tab you can modify the Forgot Password Email template and modify the bellow code as follows:

from
href="${resetPasswordLink}"
id=“reset-password-link”

to
href="${resetPasswordLink}?fromURI=<Your link to be redirect to after password change"
id=“reset-password-link”

After saving the new template, a user will be redirected to your specific link after changing their password.

About the flag that needs to be disabled: With Self Service Registration, you can configure an out of the box self service registration experience for your end users. A Registration Policy dictates what fields, password policy and email verification requirements you want to apply to your registration experience. Once enabled, a Registration UI is displayed in the Okta Sign-in Widget. Self Service Registration can be put in front of a custom application or portal, multiple apps, or even the Okta dashboard. If you don’t use this functionality and want to achieve the above flow, you can contact the Okta Support Team.

2 Likes

Thanks for all the good tips in this topic… but unfortunately only Activation redirects works for my app when fromURI is specified… Password Reset even with fromURI still takes our users to OKTA’s app/userHome… Anybody seeing this? Thanks again!

This option is not seen for my application. It is and OIDC app. Is this option also seen for an OIDC app? I see it in WS-FEd and SAML apps only.

This works as expected on my okta test (r&d) instance. However the same does not work on our preview and production instance. I get a 404 on redirect.

  1. Is there any other setting that is to be done? Maybe not explicit but something which is there by default and I missed?

  2. Is the bookmark option present in your OIDC app? I do not even get that option.