Authentication Client: how to implement Google and Facebook Logins (oauth)? #2186
Description
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