I want to customize the sign up page in okta sign in widget

Questions
1

I am trying to add a text and hyper links above or below sign up button in the OKTA hosted sign up page. But not finding any solutions. I was able to add a extra field in sign up page but not able to add a text and hyperlinks. Any help or ideas would be appreciated. I want to keep a text saying 'By signining up you agree to terms of use and privacy policy. So in this terms of use and policy will be the hyperlink. And also right now login credentials are being sent as plain text while authentication. so is there any way to hash or mask to not be sent as plain text in network call payload?

2

You can use the afterRender() method to add additional and modify existing elements as long as you have a custom domain configured. Do add this you would go to Customizations > Brands > your custom brand > Sign-in Page and here you can toggle on the code editor and click Edit to add this after you see the renderEl method.

Here’s an example where I just added it below the submit button. You can inspect the elements on the page with dev tools to see their names/classes (they do vary depending on classic/oie and which widget generation).

oktaSignIn.on('afterRender', function (context)
{
  //make sure you're in the signup form
  if(context.formName === 'enroll-profile')
  {
      //get the element above where you want to add this
      //this example will result in this addition going below the Sign Up button
      const referenceNode = document.querySelector('[data-se="o-form-content"]'); 

      //create new element to put the text
      const newDiv = document.createElement("div");

      //style the text as needed, here's a quick example of sizing it down
      newDiv.style.fontSize = "x-small";

      //add disclaimer with url 
      newDiv.innerHTML = 'By signining up you agree to <a href="https://www.google.com">terms of use and privacy policy</a>';

      //append div to your reference element
      referenceNode.appendChild(newDiv)  
  }
});

As for the second question about plaintext details, please check out this support article that covers this topic.

Hope that helps!

3

Thank you nicole appreciate your reply. will try that solution and one more thing I have custom register button. So on click on that I want to go directly to the okta sign up or registration page. So any hints on that how I could navigate to sign up page of okta?

4

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