Redirect to Login or Application After Activation

Questions OAuth/OIDC
24

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