CODEWITHSUNDEEP
react-nativedjango-allauthdjango-rest-auth
GoingLegit
GoingLegit

Reputation: 61

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

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

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!?

Upvotes: 3

Views: 1264

Answers (1)

GoingLegit
GoingLegit

Reputation: 61

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:

  1. 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:

  1. 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

Upvotes: 3

Related Questions