samuelgozi / firebase-auth-lite

A lightweight firebase auth alternative for the browser
MIT License
119 stars 19 forks source link

sendOobCode flow email parameter #49

Closed daaku closed 4 years ago

daaku commented 4 years ago

It seems like the email query parameter added by the sendOobCode in the redirectUri comes back in the continueUrl in the link in the email. This is what the link in my email looks like:

http://localhost:5000/login/?mode=signIn&oobCode=<XXX>&apiKey=<YYY>&continueUrl=http%3A%2F%2Flocalhost%3A5000%2Flogin%2F%3Femail%3Dn%40daaku.org&lang=en

So extracting it fails. Am I doing it wrong? Or does handleSignInRedirect need to handle extracting it from the continueUrl parameter?

issue-label-bot[bot] commented 4 years ago

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.61. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

samuelgozi commented 4 years ago

Im taking a look at this right now as I don't really remember...

samuelgozi commented 4 years ago

Ok, so now I remember why It works this way. If you didn't change the URL that firebase adds to the messages and emails, you'll see that the URLs point to the path __/auth/action and nod directly to the app. The reason for that is that sometimes there might be a ReCaptcha, or two steps authentication enabled for an account, and they have UI for those cases in that location for each Firebase auth.

Usually, I avoid pointing to firebase's endpoints in this library for many reasons. But in this case, it might make it easier on the developer, so If you modify the URL of your app, try to add that path to it.

Now, why does that path matter? Well because it redirects to the "continueUri" in the parameter in the sendOobCode request, and then it adds some parameters to it. So after that redirect the "email" query param is no longer escaped, and is indeed recognized by the handleSignInRedirect function.

I might change this behavior in the next version of this library, but I don't have a good idea of how to tackle this issue right now. so any suggestion is welcome.

Please let me know if this answered your question, all suggestions are welcome!

daaku commented 4 years ago

Thanks for taking the time to explain - very much appreciate it. And also kudos on making such a lean and efficient library.

I mostly follow what you said, though I'm unclear what is special about __/auth/action (is it the default location on my server Firebase expects me to handle the redirect?). I would have expected the Firebase email to link directly to the continueUrl and add the oobCode to whatever URL I passed there, but alas it doesn't.

In any case, I'm not exactly sure how I'm supposed to "fix" this so that it works. Currently I forked this library, and patched it to decode the URL first:

const emailM = decodeURIComponent(location.href).match(/[?&]email=([^&]+)/);
const email = emailM && emailM[1];

What is the right way to handle this? FWIW, I'm building a static site deployed on S3+CDN -- no server side component at all.

samuelgozi commented 4 years ago

Auth's API doesn't offer the functionality to alter the URL that will be sent in the email directly from the app. Instead, it gives us the ability to add a continueURI that will then be handled by the page that the email points to.

When a user clicks the URL in the email, he is redirected to a page that is managed by Firebase, and not the app creator, which is located at __/auth/action for every firebase project. Then that page does some things (checks if Recaptcha needs to be displayed, or maybe 2 Factor authentications need to be made, etc) and finally, that page redirects the page to the URI in the continueURI parameter.

You can tell Firebase to send a different URI with the email. But that needs to be done manually through the Firebase console.

The way this is done is as follows:

  1. log into the Firebase console
  2. select your project.
  3. go-to Authentication in the sidebar.
  4. In the tabs select "templates"
  5. Edit the template for all languages and replace the email.

I'm not familiar with a way of replacing the whole URI with the continueURI but if that was possible it was the smoothest way to handle this issue, as it won't require any changes to the code in the front end.

I will send the firebase team an email to ask them about it, and I would consider that you do the same if you are interested in this. This should not be a difficult feature to add.

samuelgozi commented 4 years ago

In order for this to work you should replace the link in the email to point to (this is the default): https://project-id.firebaseapp.com/__/auth/action?mode=<action>&oobCode=<code>

samuelgozi commented 4 years ago

If it doesn’t work please let me know, until then I assume it’s solved.