Custom OAuth Connections

Create the OAuth Connection in the Dashboard

First the user needs to create a new connection by using the Custom Social Connections extension, filling every required field before saving the changes.

Customize the Style in Lock

To customize OAuth connections you can call the builder passing both the connectionName and the style to use.

First create a custom style extending Lock.Theme.AuthStyle and define the logo, background color and name of the connection.

<style name="Style.Facebook" parent="Lock.Theme.AuthStyle">
    <item name="Auth0.BackgroundColor">@color/facebook_color</item>
    <item name="Auth0.Name">@string/facebook_name</item>
    <item name="Auth0.Logo">@drawable/facebook_logo</item>
</style>

Now in the builder's setup add the AuthStyle for the connection name that you want to override.

builder.withAuthStyle("facebook", R.style.Style_Facebook)
        .build(...);

When Lock needs to display that connection in a SocialButton, it will first search for user-overridden styles, and if none are found, it will default to the Lock social defaults. This means that for facebook it will use Facebook background color, Facebook logo and FACEBOOK as name.

As the builder method receives the connectionName you can now customize oauth2 strategy type connections. The default values for this strategy are: Auth0 logo, Auth0 background color, and OAUTH2 as name.