I have my website in Angular and NodeJs(backend). Now I am developing the app with the same website functionality in React Native.
This is my authentication flow
Firebase phone(OTP) auth
Setting cookies and userId
Since browsers implement cookie storage, I don't have to manually store the session id
To get data/call the APIs, I use passport.js(req.isAuthenticated()) as middleware
I read articles on how to do the same steps, but I didn't get clear information. I want to follow the same approach in React Native APP(since our APIs are already defined and configured). Since I am using Axios, it would be great if I can get some insights on how to send withCredentials: true & some headers globally configured to all the APIs. Any articles on how to perform these would be great too.
Related
I am trying to perform social authentication (with Google) using react native ios and android, with Django on the back end. Note, no firebase is involved here.
Problem Overview
React Native Google Signin on the front end returns an (i) access_token and (2) code when the user authenticates with google. Using django rest auth, we send a post request to the back end server and "non_field_errors: ["Incorrect value"] is returned
Plugins Used:
React Native Google Sigin
Django All Auth
Django Rest Auth
The process
Google Cloud Console Setup (OAuth 2.0 Client IDs):
3 Types are setup in Google Cloud Console
A) Web application (ClientId + Secrete)
B) Android (only ClientId)
C) iOS (only ClientId)
On the Front End (React Native Google Signin)
async componentDidMount () {
GoogleSignin.configure({
webClientId: 'ABC-123', (i.e. A above)
iosClientId: 'ABC-456', (i.e. C above)
});
}
On the Back End (Django Allauth)
1 model object is set up, Google, with A) Web application (ClientId + Secrete) as per google documentation
User Login via Front End
When the user authenticates with google in app on their phone, Android or iOS, a token and code is returned. Sending this via Django Rest Auth {access_token: 'cdeasdlkjla', code:'adkj'} returns "non_field_errors: ["Incorrect value"]
Thoughts!?
I found the problem, with the help of #Kapobajza response.
Django AllAuth Google Social Auth accepts 'access_token'
React Native Google Sigin's default is 'id_token'
Note that 'access_token' =/= 'id_token'
Therefore, there are two solutions:
Backend: Django AllAuth should support id_token. At the time of writing, it does not.
There is an open ticket here in the link below, which leads to a way to manually support it
https://github.com/pennersr/django-allauth/issues/1983
Or:
FrontEnd: React Native Google Sigin can produce an access token, with just a small step. It is outlined below, Step4
How to get accessToken of React Native GoogleSignIn?
Best solution is 2
I’ve been using Auth0 in my React web app. I also have a rule that works with new user sign ups. In my web (React) app, I use the Lock library and everything works fine.
Now, I created a React Native mobile app and because I have a custom login/sign up UI, I had to use the API method as opposed to using an Auth0 library such as Lock, etc.
My SignUp API calls work fine and create new users but my rule is NOT working with API calls. I checked to see if rules apply only to my web app but I don’t see any setting for that so I assume all rules should work for all apps that appear on my dashboard – including my new React Native mobile app.
The rule I created on Auth0 creates and assigns a new my_app_id to the new user. This rule has worked flawlessly with all sign ups coming from my web app which uses the Lock library but it doesn't seem to be firing when a new sign up comes in through the sign up API end point.
Is there anything I need to do so that my rule will work with my API calls?
Rules only run after a successful authentication event. This would not include a successful signup endpoint call, where no credentials are authenticated.
The recommended way to hook to a signup would be through a registration hook.
I basically have the same question as what is detailed here: Login redirect with asp.Core 2.0 and React. But that post never got an answer.
I've searched quite a bit and pretty much my problem is also touched on here here: https://github.com/aspnet/JavaScriptServices/issues/1440
I want to create a react front end application, but use .net core for the backend. I've used the .net core template with react redux as my boilerplate. I've also configured the .net identity on my backend. So I can actually use [Authorize] on my api calls and it works. By this I mean that if someone is authenticated the api returns data and if no one is authenticated it returns whatever the default redirect page is. I can confirm this by looking at the response on my chrome debugger and I see that it is showing the html for the register page which I've defaulted my login path to in configureapplicationcookie options.
The boiler plate is setup to serve up pages from the react client folder and uses react router. Therefore, I cannot set up any links to pages on my server. However, I'm able to manually navigate to my server pages for example /Account/Login and successfully login. My api calls through the links on the react front end then seem to work just as I would like.
What I would like to do is:
make calls from my react application to my server api
upon unsuccessful access to any api endpoint, redirect the user/request to my register page on the .net core server
have the user register and/or login and then redirect them to the route they came from through the react application.
Is this possible? Is it advisable?
I understand that you can manage all this on the front end using IdentityServer as detailed here: http://docs.identityserver.io/en/release/quickstarts/7_javascript_client.html. However, if all the infrastructure can be quickly spun up in .net and I can leverage the authentication templates, then I want to experiment with that setup and save time. Plus if this is feasible, why bother doing the setup on the front end using a 3rd party login provider? What am I missing?
I want to migrate an existing Android+iOS native app to a react-native Expo app.
In current native app, we store an auth token. I'd like this auth token to be available through ReactNative AsyncStorage api out of the box, without requiring RN native code (ie, ejecting Expo).
Is this possible, in current native app, to start writing to the same place as AsyncStorage will read after the migration?
We aim for the smoothest transition from native app to RN app, and user should stay authenticated after the upgrade.
Depends on what you're current app is using for storage. I recently used this library (https://github.com/kevinresol/react-native-default-preference) to get the data from user defaults then move it into async storage. I only migrate the refresh token and auth token.
If they are using core data, then you'll need to setup the same models etc - https://github.com/realm/realm-js/issues/584
The other storage mechanisms you can easily find a native package to get the data.
if the app is under same app name scheme you may be able to access after upgrade i guess.
I am trying to test a react native app on android which uses a native library which does oauth-based authentication using a webview. Detox does not support webviews (yet) so I was wondering if I could tap on the keyboard using coordinates in order to get through the auth (bad I know, but gets me unstuck for now).
Since the oauth screen is outside your app, I'd recommend you do the following:
Create E2E tests for your login up to the oauth screen
Get a CLI for your oauth provider or figure out how to authenticate via node.js to get the auth token
Create a deep link path in your app that accepts the token as a param and stores it the way you'd store it normally and trigger a continuation of the login flow (you may need to reverse engineer your native lib slightly)
This is generally the approach you want to take if you are using an external authentication party. If the party providing the auth package doesn't support 2 and 3, you should raise the issue with them.