Full auth functionality

[marknelissen]

The current solution provided by this library adheres best to react admin's default flow. However, this does limit the use cases of Firebase Auth to only the e-mail+password possibility. It would be nice to have default components (custom routes, sagas, screens, etc.) to allow the use of the full Firebase Auth possibilities.

I've already done something similar using Auth0, and this works pretty well, so for sure it is possible. I've yet to do the same for Firebase Auth, but I find the documentation much more confusing than the one from Auth0. If I I get to it, and manage to make it work, I'll share you my implementation. If I manage to make it reusable, I might even PR it. 😁

[benwinding]

Hi Mark,

Appreciate the contribution, but doesn't firebase already have many different Auth capabilities besides email+password? What would Auth0 bring to the table, if that was implemented? (seems to be a commercial product too, which makes things complicated)

Also, PR: #36 adds the User Claims to the Auth Provider, which might be of use to you.

Happy to look at a PR implementation if you'd like.

Thanks again for checking out the project,
Ben

[marknelissen]

Hi Ben,

I didn't mean to use auth0 instead. I meant to say that to include Auth0 in another project based on react-admin, I had to do something similar: not use the authProvider API and standard login screens, in case you had questions on how to achieve authorisation in react-admin without the authProvider.

I made a first attempt, but I'm still struggling with security issues during the redirect.

//@ts-ignore
const auth = firebase.auth(); // eslint-disable-line no-undef

export const login = async () => auth.signInWithRedirect(provider);

export const logout = () => auth.signOut();

export const getCredentials = () => auth.getRedirectResult();

export default async (type: string, params: any) => {
    switch (type) {
        case AUTH_ERROR:
            if (params.name === 'FirebaseError' && params.code === 'permission-denied') {
                await login();
            }
            break;
        case AUTH_CHECK:
            try {
                const credentials = await getCredentials();
                console.log(`Credentials ${JSON.stringify(credentials)} going to ${JSON.stringify(params)}`)
            } catch (error) {
                await login();
                throw error;
            }
            break;
    }
}

This is not the approach I took in the other project, where I didn't provide an authProvider, but did everything through custom routes, but the Firebase API seemed better compatible.

However, that approach might still be required if you want to use the drop-in UI of Firebase Auth.

[benwinding]

Ah, ok fair enough. I haven't personally tried any other Authentication methods, but it's probably worth looking at.

However, that approach might still be required if you want to use the drop-in UI of Firebase Auth.

Is that a reference to the FirebaseUI Web project? That might be a good additional component to add to this library.

[marknelissen]

Yes, that's the one.

[kovzone]

Thank you for your super awesome work @benwinding !! The sign-in through email and password works perfectly.

But how about the other sign-in methods like google sign-in? Is it possible?

Thank you!

[LaszloDev]

React-Admin does already provide you with all the needed logic, we just need to prepare the AuthProvider to be able to differentiate between the different logic methods.

I started to work on extending the auth (#47) and opening for other Firebase authentication methods. Im testing it right now on our test system and will try to finalize it in the next weeks. When its ready you just need to write your own LoginPage-component and pass a mode-param so the login handler knows which auth method should be used.

[benwinding]

Thanks again @LaszloDev,
Appreciate the efforts. Will look forward to seeing how it comes together.
👌
Cheers,
Ben