How can I pre-select a connection on my React application?

Question:

I would like to have a button for the social login like Google on my application which should redirect the users directly to Google without the need for the user to click Google from the Universal Login widget.

How can I implement this?

Answer:

To implement this, the application needs to redirect to Auth0 with the connection parameter. E.g.

/authorize?connection=google-oauth2&...

You may pass the connection parameter like in the following sample code snippet for the React applications.

ReactDOM.render(
  <Auth0Provider
    domain={config.domain}
    clientId={config.clientId}
    audience={config.audience}
    redirectUri={window.location.origin}
    connection="google-oauth2"
    onRedirectCallback={onRedirectCallback}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);
1 Like