Angular FirebaseUI Auth via Twitter, GitHub, Microsoft Not Working

Question

I'm trying to setup Angular (v11) app with FirebaseUI auth via different providers, following steps provided here.

The only one that works for me is Google. Others I'm trying all give various errors:

Twitter: "Callback URL not approved for this client application. Approved callback URLs can be adjusted in your application settings"
GitHub: "Unable to process request due to missing initial state. This may happen if browser sessionStorage is inaccessible or accidentally cleared"
Microsoft: "The provided value for the input parameter 'redirect_uri' is not valid"

However, I followed the steps & configured API keys & callback URL in the respective platforms per Firebase instructions (using the callback Firebase shows when you enable each sign-in method). The only one not so sure I did properly is Microsoft, but the others were pretty straight forward.

This is the published page in case you want to see the behavior.

This is the code repo -- the main files where I implemented the logic are in auth.service.ts & login.component.ts (I hid the apiKey/appId in firebaseConfig, since not sure if it's sensitive).

Anyone had luck with it & perhaps has some tip? Thanks!!

You should always share the source code when asking questions on Stack Overflow. Without that, we can't be of much help. Please read: stackoverflow.com/help/minimal-reproducible-example — Doug Stevenson
– Doug Stevenson, Commented Dec 12, 2020 at 5:32

Ben · Accepted Answer · 2020-12-12 18:31:12Z

3

I finally got it to work. It appears the callback URL it suggests you use in Firebase is wrong. See this example from one of the platforms: .
To make it work I had to remove the "-default-rtdb" (so correct callback in this case is: "https://bit-of-gaia.firebaseapp.com/__/auth/handler")

answered Dec 12, 2020 at 18:31

Ben

8952 gold badges12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrew Bullock Over a year ago

Had the same thing with github and a custom domain. Even if youre using a custom domain with firebase, it seems you need to use yourproject.firebaseapp.com as the hostname for oauth callbacks

Caio Mar Over a year ago

I got the same problem but with Facebook, this does not solve it. Any suggestions?

raevilman Over a year ago

In my case, I was using GitHub provider with custom domain. Although GitHub configuration in firebase console tells me to use the default redirect URL(eg. abc-989d.firebaseapp.com) not the custom one I had created. But that was causing the error in question. Once I updated my GitHub application with the new custom URL everything worked fine. Eg: https://auth.custom-domain.com/__/auth/handler this is what I've set in app configuration on GitHub.

Collectives™ on Stack Overflow

Angular FirebaseUI Auth via Twitter, GitHub, Microsoft Not Working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related