A custom provider button doesn't work

Question

The button for my custom provider appears in the Hosted Login sign-in screen, but nothing happens when I click that button. Obviously something went wrong, but what?

Answer

We know exactly what you mean. Your sign-in screen and your custom provider (Okta) look just fine:

However, when you click the Okta button you don’t get redirected to the Okta login page; you don’t trigger an error message; you don’t do anything but just sit there. What gives?

Nine times out of 10 (or maybe 9,999 times out of 10,000), there’s a simple answer to the question “What gives?” If you’re used to working with social login in Hosted Login, and if you’re used to working with the standard identity providers, then you’re used to specifying the names of your IdPs in the authentication.providers setting:

With that in mind, you might have entered the name of your custom provider in that setting as well:

And that’s the problem: you can’t enter the name of a custom provider in the authentication.providers setting. 

📘

Well, OK, obviously you can, but the provider won’t work: that’s because Hosted Login doesn’t know what to do with a provider named Okta.

Instead, you need to use an identifier for the custom provider, an identifier comprised of the following:

• Your Akamai customer ID (3cc14467-fd4f-437d-a0c0-0b3888dd2ee4).

• A period (.).

• The custom provider’s id (d284e861-d7f9-426e-93b0-56e01cf6d0ea). This is the ID assigned to the provider when it was created.

In Console, your identifier should look similar to this:

Now when you click the Okta button you’ll be redirected to the Okta login page:

By the way, here’s a tip that might help you debug an issue like this. You might have noticed that, in our original sign-in screen, there’s no icon for Okta:

This is often (although not always) a clue that the authentication.providers setting has been incorrectly configured.