with-firebase-authentication in serverless environment

[amardeepsingh20]

Examples bug report

Example name

with-firebase-authentication

Describe the bug

It is not really a bug but a request for serverless implementation of with-firebase-authentication example. Currently, this example uses a custom server which makes it ineligible for deploying to a serverless environment. It would be very helpful if a serverless target version of this example could be provided.

Additional context

A serverless target example will make the deployment of firebase projects very easy and also help as a good model for developers to migrate their projects from custom server to serverless. A guide along these lines would also be very helpful.

[TheHolyWaffle]

Firebase provides functionality for serverless webapps under the form of Session Cookies

The example should probably demonstrate, at least, the following use cases:

• Make use of mix of "firebase-admin" and regular "firebase" packages to inject data in getInitialProps, depending on whether we're client or serverside.
• Make use of the uid of the authenticated user to render user-specific data serverside

[Pushplaybang]

It would be fantastic to have a solid example of this after all the long journey to NOW 2.

[TheHolyWaffle]

@neon98 To clarify, I'm not a contributor of nextjs or zeit :) But I'd definitely appreciate to see how you would approach this example!

[neon98]

Hey @Pushplaybang @TheHolyWaffle, I am sorry I can't work on this issue due to some work. Hope you'll understand :)

[TheHolyWaffle]

Something I've just realized. By using firebase Session Cookies, you also implicitly instruct firebase to not worry anymore about authorization in the browser client-sided. This is because of the firebase.auth().setPersistence(firebase.auth.Auth.Persistence.NONE);

Because of this, none of the client-side browser functionality that firebase offers, such as firestore, can be used anymore. All of those requests have to go through some backend that does the authentication and returning of firestore data. Effectively handicapping the ease of use of firebase.

Unless someone can correct me on this ofcourse?

[dKustura]

@TheHolyWaffle have you found any new solutions for this in the meantime?

[kmjennison]

I have this mostly working in a project, and I'll try to share an example here in the next week or two.

[kmjennison]

@TheHolyWaffle Session cookies and Firebase's client-side auth storage shouldn't be mutually exclusive. To make it work, we just need to link creating/destroying the session with the client-side Firebase login/logout (which the existing with-firebase-authentication example in this repo does). In this case, we can consider the client-side Firebase auth the source of truth for whether a user is logged in. There's some duplication here; e.g., if you want to revoke a session that you've stored server-side, you'd have to revoke the user's token with Firebase and also delete the user's server-side session.

[kmjennison]

Opened a PR with an example. Feedback welcome!

[dKustura]

@kmjennison Thank you for this solution. I am a bit worried about using other Firebase services like Firestore or Cloud functions with this kind of setup. Did you try to set a connection to Firestore database because I don't see how it would be possible to connect to it from the server (on server-side render if the user is logged in) considering we only have a JWT saved on the server?

[kmjennison]

@dKustura You should be able to connect server-side with the Firebase Node.js SDK. If you're fetching data both server-side and client-side, you probably need to use the web JS SDK on the client and Node.js SDK on the server. See the "Web" and "Node.js" tabs in the Firestore docs here for code snippets. I'd approach this by loading a different Firebase SDK in getInitialProps depending on the context (server or client).

As for authorizing queries, you need to use IAM roles on the server side. Firebase says here, "If you're using one of the server SDKs, use Identity and Access Management (IAM) to secure your data in Cloud Firestore." The Firestore Node.js docs say, "This Cloud Firestore Server SDK uses Google’s Cloud Identity and Access Management for authentication and should only be used in trusted environments."

There might be another way to unify how you call Firebase regardless of whether it's on the client or server, because you do have access to the user ID and user token on the server, but I haven't looked into whether it's feasible.

[vprtwn]

The new example in #10078 is awesome, thank you for adding that @kmjennison !

In case this is helpful to other folks that find this thread, I've put together a template project (based on kmjennison's with-firebase-authentication-serverless example), along with a detailed tutorial:

https://github.com/benzguo/nextjs-now-firebase

https://dev.to/benzguo/getting-started-with-next-js-now-firebase-4ejg

[ivawzh]

Hi, @kmjennison and @benzguo . Thanks for the excellent examples. I am trying to implement Firebase Auth with

1. getServerSideProps
2. refresh cookie when Firebase Auth user custom claim got changed

Just wondering if you have any experience with that? Any clue will be appreciated. Thanks in advance 🙂

[kmjennison]

@ivawzh This example refreshes the cookie each time the Firebase auth loads on the client side, so it should stay in sync. However, I haven't used custom claims, so I'm not sure if there's something unique you're looking to handle there. For getServerSideProps, you'll just need to change any auth higher-order components to call it rather than getInitialProps (e.g., here in the example).

[ajbouh]

I have messed with using custom claims a bit. A brief overview of my approach: I have logic on the client side that checks to see if the custom claims are up to date. If not, it sends a request to the server side and the server updates the custom claims. Once the server confirms the claims have been updated, the client refreshes their id token and gets the server-emitted custom claims directly from the firebase API.

…

On Sun, May 24, 2020, 11:59 Kevin Jennison ***@***.***> wrote: @ivawzh <https://github.com/ivawzh> This example refreshes the cookie each time the Firebase auth loads on the client side, so it should stay in sync. However, I haven't used custom claims, so I'm not sure if there's something unique you're looking to handle there. For getServerSideProps, you'll just need to change any auth higher-order components to call it rather than getInitialProps (e.g., here <https://github.com/zeit/next.js/pull/10078/files#diff-f15920ef92545afed79bab0a696254a8R73> in the example). — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#8672 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAABZHPVP7WQOQA2D25ZKKTRTFVBLANCNFSM4IUXNKVA> .

[ivawzh]

Thanks, @ajbouh . did you reuse the same login API to refresh cookie? If not, what difference do we need to make in the refresh-cookie API endpoint?

[ajbouh]

I am using the firebase admin SDK on the backend and the standard firebase client in the browser. (To force the refresh you can you can pass true to getIdToken, IIRC. It should have the custom claims present in it, no need to use the login API specifically.)

[ivawzh]

@ajbouh Sorry, I haven't got it yet. When the client discovered claims updated, does it send any request to the NextJS server in order to get an updated cookie back? If yes, is that the login API from the with-firebase-authentication-serverless example?

[ajbouh]

Hmm, unfortunately I can't help you directly with this as I'm not using next.js. I'm using sapper and svelte, which is similar in some ways but different enough that I am not using any of the specific code you're referencing.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.