Adding Firebase as an AuthClient

noire.munich · May 24, 2020, 1:54pm

Hello people \o/

I’m biting to @thedavid’s invitation to work with the community on Firebase’s support.

So far it seems rather straight forward, so… here’d be my PR:

github.com/redwoodjs/redwood

Adding Firebase to the AuthClients

redwoodjs:master ← noire-munich:pr-authClient-adding_firebase

opened 01:45PM - 24 May 20 UTC

noire-munich

+360 -14

Pull request **draft**, There are a couple of todos to get it to work. Otherw…ise dirtily tested in a project, seems to work properly. Firebase Authentication -------------------------------- The Firebase authentication will require you to register your application to the firebase console - it's not as long as it sounds, everything is detailed in the official documentation: https://firebase.google.com/docs/web/setup Once you are done it is time to write some code. In web/src/index.js, make sure to have these lines: - in the imports ``` import { AuthProvider } from '@redwoodjs/auth' import * as firebase from 'firebase/app' import 'firebase/auth' ``` - after the imports, before the main component (You will find the below snippet in the Firebase console, Project settings > General Parameters ) ``` const config = { apiKey: '...', authDomain: '....firebaseapp.com', databaseURL: 'https://....firebaseio.com', projectId: '...', storageBucket: '....appspot.com', messagingSenderId: '...', appId: '...', } const firebaseClient = ((config) => { firebase.initializeApp(config) return firebase })(config) ``` - Now to your main component: ``` ReactDOM.render( <FatalErrorBoundary page={FatalErrorPage}> <AuthProvider client={firebaseClient} type={'firebase'}> <RedwoodProvider> <App /> </RedwoodProvider> </AuthProvider> </FatalErrorBoundary>, document.getElementById('redwood-app') ) ``` We have setup the AuthClient for RedwoodJS, this means that we can now use the `useAuth()` hook from RedwoodJs. But we are not done yet, as we still need to change an important file on the API side. If it doesn't exist, add `api/src/lib/auth.ts` and consider this implementation of the much needed `getCurrentUser` function: ``` import admin from 'firebase-admin' import { db } from './db' const config = { apiKey: '...', authDomain: '....firebaseapp.com', databaseURL: 'https://....firebaseio.com', projectId: '...', storageBucket: '....appspot.com', messagingSenderId: '...', appId: '...', } const adminApp = admin.initializeApp(config) const getCurrentUser: (token: string) => Promise<object> = (token) => adminApp .auth() .verifyIdToken(token) .then(({ email, uid }) => db.user .findMany({ first: 1, where: { OR: [{ email }, { uid }] }, }) .then(([user]) => user ?? 'User not found') ) export { getCurrentUser } ``` Now make sure that you pass this `getCurrentUser` to the `createGraphQLHandler` in `api/src/functions/graphql.js`: ``` export const handler = createGraphQLHandler({ db, schema: makeMergedSchema({ schemas, services: makeServices({ services }), }), getCurrentUser, }) ``` And you should be good to go. In your services you will be able to fetch your current user using this import: `import { context } from '@redwoodjs/api'`. It will have the type of whichever data you are sending back from the `getCurrentUser` function.

I’d need guidance on the types ( Typescript isn’t my game ) and feedback would be appreciated, the proposal is rudimentary but still, I may have missed some interesting points.

This being said there’d be matters to discuss:

Firebase needs to be initialized, I’d propose to make it happen in src/index.js:

    var config = {
      apiKey: '###somekey',
      authDomain: 'anonymousapp.firebaseapp.com',
      databaseURL: 'https://anonymousapp.firebaseio.com',
      projectId: 'anonymousapp',
      storageBucket: 'anonymousapp.appspot.com',
      messagingSenderId: '181173933586',
      appId: '###yourownappId',
    }

    const firebaseClient = ((config) => {
      firebase.initializeApp(config)
      return firebase
    })(config)

    ReactDOM.render(
      <FatalErrorBoundary page={FatalErrorPage}>
        <AuthProvider client={firebaseClient} type={'firebase'}>
          <RedwoodProvider>
            <MuiThemeProvider theme={theme}>
              <App />
            </MuiThemeProvider>
          </RedwoodProvider>
        </AuthProvider>
      </FatalErrorBoundary>,
      document.getElementById('redwood-app')
    )

Firebase offers plenty of different ways to sign in, I have privileged de facto the Google Auth provider with the signInWithRedirect. What should we do? Should we support more of its methods or keep it very Google focused?
Last but not least there’s a great FirebaseUI package, I had worked with it during my personal researches on my RW project but I didn’t give a try for 0.7.0 Auth package. What’s the community’s opinion on this?

Thanks for any feedback

Thomas

noire.munich · May 24, 2020, 2:00pm

I forgot one more thing: User retrieved in currentUser is the raw version from firebase with plenty of useless keys, we can narrow them down to its 6 relevant keys ( displayName, email, uid, providerId, phoneNumber, photoUrl ) - and even remove providerId.

thedavid · May 24, 2020, 9:40pm

Excited you’re taking this on @noire.munich And thank you for opening up the approach to community discussion here. Now that you also have a PR in progress, don’t hesitate to focus (and move) more of the discussion to the GitHub PR. It will be easier that way for @peterp (who’s our resident AuthMaster™ ) to follow along and help with input. Either way, just make sure to ping us – we definitely want to see this happen!

FYI: all my 2¢ below with the caveat I have no experience with Firebase.

1. Firebase Initialization
Agreed about index.js That’s aligned with current approaches in the RW Auth doc.

2. Identity Providers
Is this the correct list of OAuth identity providers?

Given this is a Google product, I think having Google Auth as a default could be expected behavior (we won’t know until people start using it, of course). But, since this is an important step in the process, I think it might also be reasonable to discuss:

if best to have no default and require setup intentionally
either way, how to ensure this is easy to manage/config and that any default configuration is exposed/obvious

3. FirebaseUI
Without this, is there any UI available? If not, I’d vote it should be included (but not so entangled it can’t be removed). But if there is a basic, working UI without it, I’d vote to make it an optional step with documented instructions and any required config ready-to-go for easy plug-n-play.

4. Documentation
Just a reminder to include updating the Authentication documentation along with this PR! We docs and are happy to help out as needed – just let us know.

5. RW Auth Generator
As a second step, we should consider how/when this gets yarn rw g auth firebase support. Ideally it would be included soon after closing this PR!

noire.munich · May 26, 2020, 8:07am

Ok, I answered in the PR
also this morning I posted my fix and now it passes the tests, seems to work on both workspaces.
I think there’s something missing in the doc, the client type should be declared also in authHeaders.ts because by default, decodeAuthToken which is used on the API side will throw an exception.
It seems to be missing here: https://redwoodjs.com/guides/authentication#contributing
Fixed in my PR this way: https://github.com/redwoodjs/redwood/pull/593/commits/e73802ff83f6ee1486e0ffb30704509a41d46c45#diff-b041bf94b0cd6b282de81b5fb1e11237
I had to implement the decoding in the api/src/lib/auth.js because the server side client with firebase is not the same as the client side - I’ll update some doc for review, in the PR, to further discuss this issue.