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 is 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 the same as in v1: Auth0 logo, Auth0 background color, and "OAUTH2" as name.