React Native Google Authenticate with Django Allauth returns "Incorrect value" (iOS/Android) - react-native

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

Related

React Native Authentication

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.

OTP implementation using firebase and laravel

How do i implement Firebase OTP verification for laravel api routes and test it using postman.
I am able to implement the same on the web routes but have no clue on how to do the same in the api route section.
Any pointer and tutorial will be much appreciated.
The flow i'm trying to reach is userdata -> mobile otp verification -> save user info to db

expo-notifications getDevicePushTokenAsync on iOS returns a token that’s not FCM and does not work with firebase

SDK Version: 40
Platforms(Android/iOS/web/all): iOS
Add the appropriate "Tag" based on what Expo library you have a question on.
Hi, I'm using react native with expo and expo-notifications, and send notifications with firebase messages in firebase functions.
The integration works great with android, not so much with iOS, the token that's returned seems to be an apn token not an FCM, and firebase admin rejects the token with "The registration token is not a valid FCM registration token"
I tried to use "https://iid.googleapis.com/iid/v1:batchImport" (following this guide: https://www.thepolyglotdeveloper.com/2017/06/apns-tokens-fcm-tokens-simple-http/) with returns a valid FCM token, and works with Firebase Notification Composer, I can get notifications through that interface, but if I try to do the conversion and send notifications from the generated FCM using firebase i get an error from firebase "SenderId mismatch".
I have the credentials correctly added into firebase iOS client, as proven by the Firebase Notification Composer, but somehow, expo is returning a token that is not signed with the same SenderId as firebase and the admin does a check the Composer does not? No sure what's the case.
In short:
I would like to get a FCM token from Notifications.getDevicePushTokenAsync(), which should be possible, or was possible (at least there are some discussions in the github issues).
The firebase function code is :
return admin
.messaging()
.send({
token: registrationTokens,
data: {...}
and the react native:
token = (await Notifications.getDevicePushTokenAsync()).data;
(both work perfect with Android)
also in expo forum: https://forums.expo.io/t/expo-notifications-getdevicepushtokenasync-on-ios-returns-a-token-thats-not-fcm-and-does-not-work-with-firebase/52155

Auth0 Rule Not Working w/ API Call from React Native App

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.

React Native Okta SSO 403

I am trying to build an SSO login flow on a React Native app using Okta's oauth 2.0 api.
Here is the flow that I am trying to achieve:
(1) webview renders login page from /oauth2/:authorizationServerId/v1/authorize?response_type=code&response_mode=query&client_id=&scope=&redirect_uri=___.
(2) user logs in.
(3) webview renders redirect_uri with authorization code in url.
(4) I extract authorization code and send it along with client id, client secret, and other necessary params to /oauth2/:authorizationServerId/v1/token.
(5) endpoint responds with accessToken.
I am able to get the accessToken through this process using postman and curl so I know that this works. I have also verified that this exact flow works on a Xamarin app.
However, when trying to hit the /oauth2/:authorizationServerId/v1/token route from my React Native app after getting the authorization code, I always get a 403 without an error message.
I am using fetch for my api calls and used the not-CRNA way of creating my app.
Has anyone ever come across this issue before? In general, has anyone been able to get this type of Okta flow to work with React Native?
At first I thought it was a CORS issue but followed the CORS test here and verified that this was not the case.
I also thought it was an issue with making a fetch request and rendering a webview at the same time. I built my own Okta sign-in page so I wouldn't have to use a webview and used this flow but got the same 403.
Any and all help on this would be greatly appreciated.
Thanks!