Multiple Social Authentication Setup

[austinjupiter]

Hi there, I’ve been following this guide to set up social authentication for one of my websites and although I’ve been able to set up Facebook and Google independently, I’m not sure how I can have both appear on my Okta sign in page.

Am I able to stack the Facebook login on top of other authentication services?

I think this is the problem area of my code, but any help or guidance would be greatly appreciated!

    var oktaSignIn = new OktaSignIn({
  baseUrl: "https://dev-389593.okta.com",
  clientId: "0oa1687mi09RIdCnN357",
  authParams: {
    issuer: "https://dev-389593.okta.com/oauth2/default",
    responseType: ['token', 'id_token'],
    responseMode: 'fragment',
    display: 'page',
    scope: [
      'openid'
    ]
  },
  idpDisplay: 'SECONDARY',
  idps: [{
    'type': 'FACEBOOK',
    'id': '0oa17rnj3uVYx27cW357'
  }],
  idpDisplay: 'PRIMARY',
  idps: [{
    'type': 'GOOGLE',
    'id': '0oa1832i8cNH3HB0q357'
  }]
});

[dragos]

Hi @austinjupiter

Please try the following code to show both IdPs

var oktaSignIn = new OktaSignIn({
    baseUrl: "https://dev-389593.okta.com",
    clientId: "0oa1687mi09RIdCnN357",
    authParams: {
        issuer: "https://dev-389593.okta.com/oauth2/default",
        responseType: ['token', 'id_token'],
        responseMode: 'fragment',
        display: 'page',
        scope: [
            'openid'
        ]
    },
    idpDisplay: 'PRIMARY',
    idps: [{
        'type': 'FACEBOOK',
        'id': '0oa17rnj3uVYx27cW357'
    }, {
        'type': 'GOOGLE',
        'id': '0oa1832i8cNH3HB0q357'
    }]
});

The widget will look as follows:

[austinjupiter]

Yes! Thank you so much!