DRF & React: how to add Social Application Token to database by clicking "login with google"

Viewed 146

I don't know what I'm doing. I'm trying to Login with Google from React app. So I've created a project in Google cloud platform, set Authorized JavaScript origins url: http://localhost:3000 and Authorized redirect URIs http://127.0.0.1:8000/accounts/google/login/callback/ and got Clint Id and Secret key. Then I've created a Social application from Django Admin site with these ID and Key.

then I write this code:

settings.py:

INSTALLED_APPS = [
    'myapp',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'rest_framework',
    'corsheaders',
    'rest_framework.authtoken',
    'rest_auth',
    'rest_auth.registration',
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.google', #google
]

SITE_ID = 1

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
   'rest_framework.permissions.IsAuthenticated',
    ],
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    ],
    'DEFAULT_FILTER_BACKENDS':['django_filters.rest_framework.DjangoFilterBackend'],
}

urls.py:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),
    path('api/rest-auth/', include('rest_auth.urls')),
    path('api/rest-auth/registration/', include('rest_auth.registration.urls')),
    
    path('accounts/', include('allauth.urls')),

in Reactjs:

//...code
    responseGoogle = (response) => {
        console.log(response);
      }
//..code
<GoogleLogin
    clientId="634453711672-3lf3sk6g4dl74q428n14jc4n6n592d99.apps.googleusercontent.com"
    buttonText="Login"
    onSuccess={this.responseGoogle}
    onFailure={this.responseGoogle}
    cookiePolicy={'single_host_origin'}
  />

when i click this Login button, then select my gmail account, it console log an object. kx{Os: mx {$R: "**************", Ne: "Asif Biswas", ET: "Asif", GR: "Biswas",....}...}. but doesn't create any Social Account in database.

My goal is: click the Login button > authenticate user(set token in local storage) > Create Social account and application token (in database).

any suggestion?

0 Answers
Related