Sign in with Facebook

Identity Engine

Note: In proxy model architectures, where a server-side app using the embedded SDK is used as a proxy between client apps and Okta servers, a request context for the client apps is required. The expectation is that security enforcement is based on the client request context's IP address and user agent.

However, since these values are currently derived from the server app rather than the client, this enforcement isn't available. As a result, network zones or behaviors that drive their conditions based on these request context values (geolocation, IP Address, or user agent) won't work until a solution to the issue is found.

This guide covers a sequence of steps that you can follow to build an app that allows users to sign in with the Facebook social Identity Provider.

---

Learning outcomes

• Configure your Okta org to use Facebook as an Identity Provider.
• Challenge a user's identity using Facebook.

What you need

• An app that uses the embedded Identity Engine SDK
• Okta org already set up for a social IdP use case
• Identity Engine SDK set up for your own app

Sample code

Node.js Identity Engine sample app (opens new window)

---

Configuration updates

Before you build the Facebook IdP sign-in flow, ensure that you've completed the following steps:

• Set up your app for a password factor only use case

• Set up your Okta org for a social IdP use case

Summary of steps

The following diagram shows the sequence of steps for the Facebook sign-in flow.

Integration steps

1: The user navigates to the sign-in page

As part of the /login entry point, call idx.startTransaction() to render social Identity Providers on the user sign-in page, as shown in the login.js page of the SDK sample application.

// entry route
router.get('/login', async (req, res) => {
  req.setFlowStates({
    entry: '/login',
    idxMethod: 'authenticate'
  });

  // Delete the idp related render logic if you only want the username and password form
  const authClient = getAuthClient(req);
  const { availableSteps } = await authClient.idx.startTransaction({ state: req.transactionId });
  const idps = availableSteps
    ? availableSteps
      .filter(({ name }) => name === 'redirect-idp')
      .map(({ href, idp: { name }, type }) => ({
        name,
        href,
        class: getIdpSemanticClass(type),
        id: type.toLowerCase()
      }))
    : [];

  renderTemplate(req, res, 'login', {
    action: '/login',
    hasIdps: !!idps.length,
    idps,
  });
});

You need to build a generic sign-in view page with the social sign-in options available from the list of IdPs returned. However, in this use case, Facebook is the only configured IdP in the list. For example:

<div class="ui row grid">
        {{#hasIdps}}
          <div id="idp-buttons" class="ui row">
            {{#idps}}
              <button id="{{id}}" onclick="location.href='{{href}}'" class="ui {{class}} button">
                {{name}}
              </button>
            {{/idps}}
          </div>
        {{/hasIdps}}
</div>

The previous code snippet is rendered as a Sign in with Facebook button, as shown in the following wireframe.

2: The user signs in with Facebook

When the user selects the Sign in with Facebook option, they are directed to the Facebook sign-in page.

After the user signs in to Facebook successfully, Facebook routes the user to the location specified in Valid OAuth Redirect URIs from the Facebook developer site.

Note: The Valid OAuth Redirect URIs for your Okta org is in the format: https://{yourOktaDomain}/oauth2/v1/authorize/callback. See Create a Facebook app in Facebook for details on configuring the Valid OAuth Redirect URIs value.

3: Handle the callback from Okta

Okta returns the Interaction code in the callback to the Sign-in redirect URI location specified in the Create a new application section. You need to handle the callback by exchanging the Interaction code for an access token using idx.handleInteractionCodeRedirect().

try {
    // handle interactionCode and save tokens
  await authClient.idx.handleInteractionCodeRedirect(callbackUrl);
} catch (err) {
  if (authClient.isInteractionRequiredError(err)) {
    // need to proceed with required authenticator/s
  }
  throw err;
}

With the obtained access token, you can retrieve basic user information by making a request to Okta's OpenID Connect authorization server. See Get the user profile information for details.

The user is now successfully signed in and can be sent to the default signed-in home page.