OKTA Sign In Widget shows empty page

Questions OAuth/OIDC
1

I am trying to implement Okta Sign In widget on a Visualforce Page which is rendered in Force.com site page. With the following code it doesn’t show the sign in widget(no user name & password fields) and it is displaying as empty page. What am I doing wrong here?

<apex:page showHeader="false">

<script src="https://global.oktacdn.com/okta-signin-widget/7.5.2/js/okta-sign-in.min.js" type="text/javascript"></script>
<link href="https://global.oktacdn.com/okta-signin-widget/7.5.2/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>

<script type="text/javascript">
let oktaSignIn = new OktaSignIn({
          baseUrl: "https://abccorp.oktapreview.com",
          clientId: "{ID}",
          authParams: {
            issuer: "https://abccorp.oktapreview.com/oauth2/default",
            display: 'page',
            pkce: true,
            redirectUri: 'https://abccorp.oktapreview.com'
          },
          el: '#osw-container'
    )};
    oktaSignIn.showSignInToGetTokens(
              {
              getAccessToken: true,
                getIdToken: true,
              },
              function success(res) {
                console.log(res);
              },
              function error(err) {
                // handle errors as needed
                console.error(err);
              }
            );
</script>

<apex:form >
<apex:actionFunction action="{!editOSPPage}" name="displayOSP" />
<apex:composition template="{!$Site.Template}">
<apex:define name="body"> 
<div id="osw-container">
</div>

</apex:define>
</apex:composition>
</apex:form>
</apex:page>
2

Hi Pradheepan, my name is Akash and I will be assisting you with this issue.

There are few questions that I have, could you please answer them?

  1. Are you trying to run the exact code? If so, do you specify any Client ID to the clientId property?
  2. Did you review the browser Console? Did you see any errors?
  3. Did you review the browser Network logs? Did you see any failures or errors?

Make sure to add a valid Client ID to the clientId property. Refer to this documentation to find the Client ID of the application - Find your application credentials | Okta Developer

If {ID} is a template literal, make sure the syntax is right, as I can see that it is added inside the double quotes which would be considered as a String.

If there is any errors in the browser developer tools, please provide us with more details of the same along with the screenshot.

Make sure to redact any sensitive details.

3

This is the error that I see in the browser console.
Access to fetch at ‘https://xxx.oktapreview.com/oauth2/default/v1/interact’ from origin ‘https://xxx--dev2.sandbox.my.salesforce-sites.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

4

This is the error I see in the browser console.
Access to fetch at ‘https://xxx.oktapreview.com/oauth2/default/v1/interact’ from origin ‘https://xxx--dev2.sandbox.my.salesforce-sites.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

5

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