Django + React , Google Login Button doesn't shown

Question

I use frontend as React and backend as Django.

I want to add Google social login, but button doesn't shown.

I copy and paste this link, https://developers.google.com/identity/gsi/web/guides/display-button

Here is my code.

react - index.html

<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
     data-client_id="1234567890-myclientid.apps.googleusercontent.com"
     data-login_uri="http://127.0.0.1:8000/accounts/google/login/"
     data-auto_prompt="false">
  </div>
  <div class="g_id_signin"
     data-type="standard"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
  </div>

django - urls.py ... path('accounts/', include('allauth.urls'),), ...

error occured.

'/accounts' page works very well.

[GSI_LOGGER]: Error parsing configuration from HTML: Unsecured login_uri provided.

Answer 1

Change your data-login_uri to http://localhost:8000/...

data-login_uri does not accept non-HTTPS URIs, which are "Unsecure", the ONLY exception is "localhost" (for local development purposes), and "127.0.0.1" doesn't count.

Also, remember to add both http://localhost and http://localhost:8000 to Authorized JavaScript origins.