Authentication Client: how to implement Google and Facebook Logins (oauth)?

[drixie]

Steps to reproduce

I have gone through the official documentation for authentication-client, and also read multiple articles. There exists content for local strategy, but there is none for oauth.

Some context: I am trying to implement authentication for both a React web-based frontend and a React-native app calling the same Feathers backend api. Web-based frontend and backend api are running on different servers/domains.

The client implementation for the local strategy appears to be easy because the authentication-client is simply making a call to the backend and receives a JWT upon successful login.

It's a bit complicated for oauth, and I am yet to see a clear example. At the moment, I just redirect from the frontend to backend/oauth/google. However, according to the official docs, I have to put backend/oauth/google/callback in the oauth settings on Google. This means that when the authentication is done, the app redirects to the backend and not to the frontend, and this is not the desired behavior. Also, calling fc.authenticate() in the frontend results in an error if accessToken is not yet available.

Expected behavior

I need a way to implement authentication in the frontend client, such that when a user clicks the login button, they are redirected to the Google (or any other Oauth) login page, and upon successful authentication, they are redirected back to the frontend, with the accessToken already saved in localStorage (or AsyncStorage), and the corresponding entry created in the users table for new users. Feel free to point me to any publicly available resource or share sample code here.

Also, for React-Native, how do I get feathers authentication client to use the native login popup instead of redirecting to the browser-based Google login page? This will improve the UX on Android devices.

System configuration

I am using feathers v4

[daffl]

How to set up Facebook login for a browser application is described in this Cookbook entry. How to use oAuth with e.g. React Native is described in the docs for flow #2. You first have to obtain the oAuth access token first through the Facebook or Google mobile SDKs.

[drixie]

@daffl Thanks for your prompt response. I previously read the cookbook entry you shared, and it only covers implementation in the backend. My question is focused on the the authentication-client module. How do you connect it to the backend implemented in the cookbook entry in order to achieve flow #1?
It appears that the examples in the docs and cookbook are written with the assumption that the frontend and backend will be on the same server/domain.

I will explore the docs you shared for flow #2.

[daffl]

You call app.reAuthenticate() as shown in the frontend section of the main guide and documented in more detail in the app.reAuthenticate API documentation:

Will try to authenticate using the access token from the storage or the window location (e.g. after a successful OAuth login). This is normally called to either show your application (when successful) or showing a login page or redirecting to the appropriate OAuth link.

[drixie]

@daffl For some reason, app.reAuthenticate() and app.authenticate() will not automatically pickup the token passed back in the URL by the server. I may have to do a manual implementation.

Also, what is the difference between app.authenticate() and app.reAuthenticate() when using jwt with oauth?

[daffl]

That difference is also explained in the documentation I linked. The token should picked up as soon as app.reAuthenticate is called. If it is not first check if you are seeing any error and/or provide an example repository to reproduce your issue.

[forgot]

@daffl This seems to be similar to #2031 and #2116. In all three, things get weird with the redirects if the oauth path has any sort of prefix or is on a different server/domain. It's like Feathers expects all redirects to be internal to the Feathers backend with the exception of the providers login page.

In my particular case the Feathers backend is located behind /api. Clicking a link to /api/oauth/<provider> from the front end throws a 404. Manually changing it to api/api/oauth/<provider> does allow it to move on, but it throws another 404 at api/oauth/connect/<provider>. Again, manually changing this to api/api/oauth/connect/<provider> allows it to move on to the providers login page, but the post-auth redirect 404s because the URLs don't match. The provider I'm trying to use is GitHub, but it doesn't seem to matter who the provider is.

I've read through all the referenced documentation, but I can't figure out how to handle this scenario.

[daffl]

This is a bug tracked in #2031

[daffl]

#2031 has been fixed in v5.0.0-beta.0. See #2031 (comment)