Confused about login page, sign up, branding

Questions
1

Pretty sure I’ve done all the google searching, asked ChatGPT, and read the docs, but can’t get clarity on what I’m looking for.

My app is a regular static SPA on the f/e, and a REST API on the backend.

Previous to OKTA:

  • my app already has paying users
  • my app has a mix of sign-in with Google, Microsoft, or our custom idp (identity stored in our database).

With OKTA:

  • we have built basic poc with Okta SSO working

Questions:

  1. We have an existing login page that we want to continue using. Is there a convenient branded “login with okta” button available? I think this is not the Sign In Widget which does a lot more. Just a basic CSS button to call the signInWithRedirect function?

  2. When a new user comes to our app, they could through our “Register New User” page. It’s hard to reason about how this works in the world of Okta. What is the intended behaviour of a SaaS product to signup/get payment for a new user whilst utlisiting Okta flow?

2

I’ll answer your first question, as I’m not sure what you are asking in the second one.

There is no button like that, but you can have a button which will trigger a redirect to Okta (check okta-auth-js library on GitHub). It does not require the widget, just JS logic.

3

as @phi1ipp mentioned there is no button like that out of the box, but it should trivial to build.

You could do something like this:

// Add html button
<button id="loginWithOkta" class="okta-button">Login with Okta</button>  
 
// Add your button styling
.okta-button {
   ...
}

  // Call the signInWithRedirect function here
document.getElementById('loginWithOkta').addEventListener('click', function () {
    authClient.signInWithRedirect()
});

As for your second question if I understand it correctly about integrating your own registration and payment with okta, you could do something like this:

  • When a new user fills out the registration form on your app, create a new user in Okta using the Okta API. This will ensure the user has an account within Okta.
  • After successful registration with Okta, you can redirect the user to your payment processing page and collect payment information.
  • Once payment is successful, you can update the user’s profile in Okta to reflect their payment status (e.g., adding a custom attribute to store their subscription status) using the Okta API.

with this, you can maintain your existing registration and payment flow while utilizing Okta for user management and authentication.

1 Like