Instructions for

Sign in with Facebook using the Widget

This guide describes how to allow users to sign in with the Facebook social Identity Provider by using the Sign-In Widget.

Learning outcomes

Set up your app to support the sign-in flow with Facebook IdP use cases by using the Sign-In Widget.

What you need

An app that uses the embedded Okta Sign-In Widget and Identity Engine SDK
An Okta org already set up for a social IdP use case
A Sign-In Widget and SDK set up for your own app

Sample code

Configuration updates

Before building the Facebook IdP sign-in flow using the widget, ensure that you've set up your Okta org for a social IdP use case.

After you've set up your Okta org for the social IdP use case, download and configure the SDK, Sign-In Widget, and sample app. These steps guide you to the appropriate repository and location of the embedded Sign-In Widget sample app. They also identify the packages to install and describe other changes to the Okta org that are required for the widget.

Summary of steps

Integration steps

When the user goes to the sign-in page, the Widget loads and automatically displays the Sign in with Facebook button. If the Facebook button doesn't appear, make sure that you’ve completed all the steps in Configuration Updates.

When the user selects Sign in with Facebook, they’re redirected to the Facebook sign-in page.

The user signs in to Facebook

After the user enters their credentials in the Facebook sign-in page, Facebook first validates the sign-in request. If the sign-in flow is successful, Facebook redirects the request to the Okta org URL that you entered in the Valid OAuth Redirect URIs and Site URL fields. These field values, described in Set up your Okta org for a social IdP use case, have the following format: https://{yourOktaDomain}/oauth2/v1/authorize/callback, for example, https://dev-12345678.okta.com/oauth2/v1/authorize/callback.

Handle the callback from Okta

After Facebook sends the success login request to your Okta org, the org redirects the request to your app. The org uses the value in the Sign-in redirect URIs field. You added a value for this field when you created an app. The app code that connects the callback URL to a function is identical to the code described in Basic sign-in flow using the Widget.

Get and store tokens and redirect the user

The next step is to get the tokens from the /token endpoint using the returned interaction_code and the PKCE parameters. After the tokens are fetched, store them in session for later use. The code that fetches and stores these tokens is identical to the code described in Basic sign-in flow using the Widget.

Get the user profile information (optional)

You can obtain basic user information by making a request to the authorization server. Make a request to the /v1/userinfo (opens new window) endpoint using the tokens that you obtained from the LoginResponse object's Token property.

func getProfileData(r *http.Request) map[string]string {
  m := make(map[string]string)

  session, err := sessionStore.Get(r, "okta-custom-login-session-store")

  if err != nil || session.Values["access_token"] == nil || session.Values["access_token"] == "" {
    return m
  }

  reqUrl := os.Getenv("ISSUER") + "/v1/userinfo"

  req, _ := http.NewRequest("GET", reqUrl, bytes.NewReader([]byte("")))
  h := req.Header
  h.Add("Authorization", "Bearer "+session.Values["access_token"].(string))
  h.Add("Accept", "application/json")

  client := &http.Client{}
  resp, _ := client.Do(req)
  body, _ := ioutil.ReadAll(resp.Body)
  defer resp.Body.Close()
  json.Unmarshal(body, &m)

  return m
}

Edit This Page On GitHub