Multiple Social Authentication Setup

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'
  }]
});

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:

1 Like

Yes! Thank you so much!