Is it possible to use SAML flow in a Single page React app without Lock?

Help
1

Is there a way to initiate the SAML SSO flow if we aren’t relying on lock.js?
Can it be achieved with embedded functionality with auth0.js or a custom hosted login page?

Looking forward to a response.
Thanks.

2

Hi @FatalTouch.
Using a SAML identity provider to authenticate into a React SPA is definitely possible without using Lock.

You React app will talk OIDC/OAuth2 to Auth0, requesting a token with the /authorize endpoint ( webAuth.authorize()). If there’s no session in place, Auth0 will show the hosted login page, which you can customize to suit your needs.

The hosted login page, based on user input, needs to:

  • gather user credentials (if using username/password), or
  • redirect the user to the appropriate external identity provider (be it social or enterprise)

Lock does the above automatically based on the available connections, and it does “home realm discovery” which is sending the user to an enterprise connection when it finds a matching email domain. E.g. if you associated acme.com to a SAML connection, when the user types john.doe@acme.com the password field disappears and the login button takes the user to the IdP.

If you don’t want to use Lock, you’ll have to implement your own UI. You can start from the “Custom Login Form” template, which shows how to take user credentials (if you’ll be using an optional database connection) or send the user to an external connection by using this code:

      function authenticateWithExternalIdP() {
        webAuth.authorize({
          connection: 'your-saml-connection'
        }, function(err) {
          if (err) displayError(err);
        });
      }

You’ll need to implement the logic to call that function. Common options are:

  • Take the user directly to the connection if it is the only one available for the application.
  • Provide a button (“Authenticate with xxxxx”)
  • Do home realm discovery, i.e decide what to do based on the user’s email address.