Django REST to React - getting social auth tokens without password

Question

I want to pass info to React about the current authenticated user within an app that only uses social authentication on the backend (that is processed by social_django). All of my user and user token info is stored within django REST, and to access the tokens, I normally have to send POST requests to rest_framework.authtoken's obtain_auth_token view. My django root urls.py file looks like:

...
from rest_framework.authtoken.views import obtain_auth_token

urlpatterns = [
    ...
    url(r'^obtain-auth-token/$', obtain_auth_token),
    ...
]

However, in order to actually get the auth tokens associated with the users in my database, I need to supply the username and password within my POST request. Social authentication automatically creates new users without assigning any passwords, so how do I get those tokens?

You can return the token in the request body and assign it to a Javascript variable. — Matthew Daly

bharathkallurs bharathkallurs · Accepted Answer · 2017-09-28T19:09:44

Have you got this working? If no, here is what I did. Hope it helps.

My Setup:

Django with Postgres
Django Rest Framework for REST API implementation
Python Social Auth (PSA) for Social Authentication (For now using Google+ libraries)
Reactjs frontend

While using <a href="{% url 'social:begin' 'google-plus' %}">Login</a> for login, it translates to /login/google-plus/. This not only get's the acess_token but also creates a "social user" in your database. I used oauth 2.0 client side libraries in my case and roughly followed this approach to fetch the google user object with all the details on the client side. I replaced form in above link with ajax call which is more flexible and gives control to me to access tokens and other information necessary. The ajax call here ensures creation of social user in social auth table within the database.

<script type="text/javascript">

gapi.load('auth2', function () {
let auth2;

auth2 = gapi.auth2.init({
  client_id: "YOUR CLIENT ID",
  scope: "profile",
  cookie_policy: 'single_host_origin'
});

auth2.then(function () {
  let button = document.getElementById("google-plus-button");

  auth2.attachClickHandler(button, {}, function (googleUser) {
    // Send access-token to backend to finish the authenticate
    // with your application

    let authResponse = googleUser.getAuthResponse();

    $.ajax({
      "type": "POST",
      "url": "/complete/google-plus/",
      "data": {
        "access_token": authResponse.access_token,
        "CSRF": "{% csrf_token %}"
      }
    }).then(function(data){
      console.log(data);
      // Your success code
    }).fail(function(error){
      console.log(error);
    });
  });
 });
});
</script>

Once you fetch the access_tokens you can store them in browser local storage till the user logs out. On log out you can delete them.

This method works well for me for the setup I mentioned. Also the problem of querying /obtain-auth-token with username and password is not there at all.

Would definitely be interested to know if there are other ways of accessing social auth tokens from PSA django. Cheers!

Django REST to React - getting social auth tokens without password

1 Answers