Using generic (custom) connections with Auth0

Question

I am trying to use Auth0 to log in to several social media sites at once in a single page app. I have added a generic OAuth2 server to my account for Tumblr, using the instructions here: https://auth0.com/docs/connections/social/oauth2. I have verified that the server was correctly added, and the JSON-P response for my client application is populated with the correct info based on what I added.

My question is, how can I use the JS popup widget to login to this server? I essentially have a couple social logins that are built-in to Auth0 that are working by passing (e.g.) connections: ['twitter'] to the .show() function, and a couple social logins that are not built-in, that I can't seem to wire in correctly to work similarly to the built-in social logins.

In other words, when I use connections: ['twitter'], the popup correctly shows the "Login with Twitter" button. However, when I use connections: ['tumblr'] (where 'tumblr' is the name of the custom connection I made), the popup doesn't show any buttons or even the username/password fields to login to my custom connection. I'm clearly not understanding how this popup is supposed to work with custom connections, so any advice would be much appreciated.

Answer 1

It turns out that Tumblr uses oauth1, not oauth2. So, I was on the right track, but I was just using the wrong eaxmple page. Here is the example page for oauth1 connections: https://auth0.com/docs/oauth1.

You can also then add customizations to the login screen as described here: https://auth0.com/docs/libraries/lock/ui-customization. That will allow you to do what I was looking for in my original question.

Answer 2

Custom OAuth2 connections won't show up on Lock (the UI widget), you have to use your own UI. The library you are looking for is auth0.js (UI-less library) that will handle the auth process for you.

This is likely changing in the next release of Lock.