0

I've had my log-in and authentication set up in a React app with Firebase Auth and a Heroku hosted server. It's all been working well. I've now tried the app on different browsers and found that my log-in feature doesn't work at all on Chrome on mobile, and also on Safari. When I log in on Chrome, I get the usual log-in screen, followed by the Firebase Auth redirect, and then I'm redirected to the log-in screen with the following message in a yellow pop-up:

"This browser is not supported or 3rd party cookies and data may be disabled"

I'd been following the csurf and jwt middleware documentation for my sessions, and I'm wondering whether it's best to rewrite my session code to accommodate for cookies not being fit for purpose when my server is hosted on a different domain to my React app. Alternatively, should I do away with Firebase Auth?

Having spent a few months working through different problems, I'm perplexed as to why cookies seem to be the preferred option for the middleware I've used (when they seem to give you nothing but grief), and also, why Firebase Auth doesn't accommodate for use of cookies (since they're the preferred option in middleware documentation).

JimmyTheCode
  • 3,783
  • 7
  • 29
  • 71

1 Answers1

0

I'm not sure what the best option is, but the best one I've determined is to use jwt authentication, as per: This PERN tutorial by Henry at FreeCodeCamp and then combine it with this Firebase Auth tutorial by Maksim Ivanov (and also remove the cookies and csurf functionality that Maksim introduced).

Apparently Safari don't allow 3rd party cookies, which makes it very difficult to use cookies for authentication between servers. There are workaround provided in the other responses in that link, although they all seem a bit convoluted to me.

I've also seen a post on Stack suggesting that CSRF wasn't required if using with Firebase Auth, since it has implicit CSRF protection within it. Although I wouldn't take my word on that one.

JimmyTheCode
  • 3,783
  • 7
  • 29
  • 71