Building a Native Single Sign-On Experience JavaScript Examples

Use these high-level examples to understand how to create a native single sign-on (SSO) experience for a single-page app. This configuration uses a redirect-based flow to make it seem like your app natively integrates with an SSO provider. It isn’t technically headless, but the user experience is the same as the headless flows.

Constructing an Authorization URL

A key part of this configuration is the sso-provider parameter. You use this parameter to identify the SSO provider configured in Salesforce, whether it’s an authentication provider or a SAML identity provider. During the redirect-based flow, Salesforce checks for this parameter and redirects to the SSO provider so the user can log in.

To use the sso-provider parameter with a redirect-based flow, you must first construct an authorization URL. This example constructs the URL and redirects the browser to the Experience Cloud site.

1//Setup the Authorization URL
2  redirectURL = expDomain + _authorizationURI;
3  
4  //Add Params to the Authorization URL
5  redirectURL = redirectURL + '?client_id=' + _this.clientId;
6  redirectURL = redirectURL + '&redirect_uri=' + _this.ssoCallbackURL; 
7  redirectURL = redirectURL + '&state=' + storeState(state);
8  redirectURL = redirectURL + '&response_type=code';
9
10  //Specificy the SSO Provider
11  redirectURL = redirectURL + '&sso_provider=' + ssoProviderDevName;
12
13  //Add Scopes
14  if (scopes!= null) {
15      redirectURL = redirectURL + '&scopes=' + scopes;
16  }
17
18  //Add Code Challenge 
19  requestBody = requestBody + "&code_challenge=" + generateCodeChallenge(); 
20
21  //Redirect the Browser
22  window.location.href = redirectURL;

The browser is redirected to the Experience Cloud site briefly, so the user never sees the Experience Cloud login page. The browser then automatically redirects to the SSO provider and loads the provider’s login page. The user logs in with their credentials from the provider. The browser is again briefly redirected to Salesforce before being automatically redirected to your app.

Token Exchange

The app must process the redirect to get the authorization code.

1// Get URL Params from the callback URL
2  queryString = window.location.search;
3  urlParams = new URLSearchParams(queryString);
4  console.log('Loading Callback Params: ' + urlParams); 
5
6  //Create the Code Response from the URL params
7  codeResponse = new Object; 
8  codeResponse.code = urlParams.get('code');
9  codeResponse.state = urlParams.get('state');
10  codeResponse.sfdc_community_url = urlParams.get('sfdc_community_url');
11
12  // Call the common token exhcange method.
13  tokenExchange(codeResponse, getCodeChallenge(), authorizationType.SSOLogin, null);

In the last line, this example calls a token exchange function. Here’s an example of this function.

1function tokenExchange(response, codeChallenge, authorizeType, uniqueVisitorId) {
2  // Get Values from Code Response
3  code = response.code;
4  stateIdentifier = response.state; 
5  baseURL = response.sfdc_community_url; 
6
7  state = null; 
8  // validate state if it was present
9  if (stateIdentifier != null) {
10    state = getState(stateIdentifier, true); 
11    if (state == null) {
12      onError("A state param was sent back but no state was found");
13      return; 
14    }
15  }
16
17  // Create Client
18  client = new XMLHttpRequest();
19  client.open("POST", expDomain + tokenURI, true);
20  client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
21
22  // Build Request Body
23  requestBody = "code=" + code + "&grant_type=authorization_code&client_id=" + _this.clientId + "&redirect_uri=" + _this.callbackURL;
24
25  // Add PKCE
26  requestBody = requestBody + "&code_verifier=" + generateCodeVerifier(); 
27
28  // Send Request
29  client.send(requestBody);
30  client.onreadystatechange = function() {
31    if(this.readyState == 4) {
32      if (this.status == 200) {
33          //Access Tokens have been returned
34          console.log("Code and Credntial Flow, token response: ");
35          console.log(JSON.parse(client.response)); 
36        } else {
37          onError("An error occured during token exchange for " + authorizeType, client.response)
38        }  
39      }
40    }
41  }