Add Google oAuth integration (#1045)

SocialPass · Feb 20, 2024 · af64d6a · af64d6a
1 parent 6ccf666
commit af64d6a
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 22 deletions.
diff --git a/backend/.envs/.env.local b/backend/.envs/.env.local
@@ -52,3 +52,7 @@ APPLE_WALLET_TEAM_ID=""
 # STRIPE
 # ------------------------------------------------------------------------------
 STRIPE_API_KEY="sk_test_51KvpFEJ8LTYPBcCzE6lXIAoQ3zG8MCGlZMeCdfQTVn5ewN2tymAHYPsjM7NP90VpAG7NEumlfhCJoyRsPrEsZiRx00H2oDqiNR"
+
+# OAUTH
+# ------------------------------------------------------------------------------
+GOOGLE_OAUTH_CLIENT_SECRET=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
diff --git a/backend/.envs/.env.production b/backend/.envs/.env.production
@@ -68,4 +68,8 @@ APPLE_WALLET_TEAM_ID=""
 
 # STRIPE
 # ------------------------------------------------------------------------------
-STRIPE_API_KEY=""
+STRIPE_API_KEY=""
+
+# OAUTH
+# ------------------------------------------------------------------------------
+GOOGLE_OAUTH_CLIENT_SECRET=""
diff --git a/backend/.envs/.env.test b/backend/.envs/.env.test
@@ -53,3 +53,7 @@ APPLE_WALLET_TEAM_ID="Team Identifier"
 # STRIPE
 # ------------------------------------------------------------------------------
 STRIPE_API_KEY="sk_test_51KvpFEJ8LTYPBcCzE6lXIAoQ3zG8MCGlZMeCdfQTVn5ewN2tymAHYPsjM7NP90VpAG7NEumlfhCJoyRsPrEsZiRx00H2oDqiNR"
+
+# OAUTH
+# ------------------------------------------------------------------------------
+GOOGLE_OAUTH_CLIENT_SECRET=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
diff --git a/backend/apps/router.py b/backend/apps/router.py
@@ -16,10 +16,10 @@
     path("", include("apps.marketing.urls")),
     # Event Checkout
     path("", include("apps.checkout.urls")),
-    # User Auth / Organizer Dashboard
-    # Note: First path ("dashboard/accounts/") is kept for backwards compatibility
-    path("dashboard/accounts/", include("allauth.urls")),
-    path("", include("allauth.urls")),
+    # User Auth
+    path("accounts/", include("allauth.urls")),
+    path("accounts/", include("allauth.socialaccount.urls")),
+    # Organizer Dashboard
     path("dashboard/", include("apps.dashboard_organizer.urls")),
     # Staff Dashboard
     path(settings.STAFF_URL, include("apps.dashboard_staff.urls")),

diff --git a/backend/config/settings/base.py b/backend/config/settings/base.py
@@ -88,6 +88,7 @@
     "allauth",
     "allauth.account",
     "allauth.socialaccount",
+    "allauth.socialaccount.providers.google",
     "crispy_forms",
     "crispy_bootstrap5",
     "django_quill",
@@ -120,6 +121,23 @@
 LOGIN_REDIRECT_URL = "dashboard_organizer:dashboard_redirect"
 # https://docs.djangoproject.com/en/dev/ref/settings/#login-url
 LOGIN_URL = "account_login"
+# https://docs.allauth.org/en/latest/socialaccount/index.html
+SOCIALACCOUNT_PROVIDERS = {
+    "google": {
+        "APP": {
+            "client_id": "949645827365-rok4geldv705aoi0qaccn1qigg8g8gtq.apps.googleusercontent.com",
+            "secret": env("GOOGLE_OAUTH_CLIENT_SECRET"),
+            "key": ""
+        },
+        "SCOPE": [
+            "profile",
+            "email",
+        ],
+        "AUTH_PARAMS": {
+            "access_type": "online",
+        }
+    }
+}
 
 # PASSWORDS
 # ------------------------------------------------------------------------------
@@ -274,12 +292,6 @@
 # https://django-allauth.readthedocs.io/en/latest/configuration.html
 ACCOUNT_EMAIL_VERIFICATION = "mandatory"
 
-# https://django-allauth.readthedocs.io/en/latest/configuration.html
-SOCIALACCOUNT_ADAPTER = "apps.root.adapters.SocialAccountAdapter"
-
-# https://django-allauth.readthedocs.io/en/latest/forms.html
-SOCIALACCOUNT_FORMS = {"signup": "apps.root.forms.UserSocialSignupForm"}
-
 # https://django-allauth.readthedocs.io/en/latest/views.html#logout-account-logout
 ACCOUNT_LOGOUT_ON_GET = True
 
@@ -290,7 +302,10 @@
 # Note: Allows for email-only auth
 ACCOUNT_EMAIL_REQUIRED = True
 ACCOUNT_USERNAME_REQUIRED = False
-ACCOUNT_AUTHENTICATION_METHOD = 'email'
+ACCOUNT_AUTHENTICATION_METHOD = "email"
+
+# https://docs.allauth.org/en/latest/socialaccount/configuration.html
+SOCIALACCOUNT_LOGIN_ON_GET = True
 
 # Your stuff...
 # INTERNAL

diff --git a/backend/static/images/g-logo.svg b/backend/static/images/g-logo.svg
diff --git a/backend/templates/account/login.html b/backend/templates/account/login.html
@@ -1,5 +1,5 @@
 {% extends "account/base.html" %}
-{% load account static i18n %}
+{% load account socialaccount static i18n %}
 
 {% block head_title %}{% trans "Sign In" %} - SocialPass{% endblock %}
 
@@ -11,10 +11,15 @@
 				{% trans "Please sign in to your account to continue." %}
 			</div>
 		{% endif %}
-		<h1 class="h3 mb-0">{% trans "Sign In" %}</h1>
-		<p class="text-body-secondary">
-			{% trans "Please enter your credentials to sign in to your account." %}
-		</p>
+		<h1 class="h3 mb-4">{% trans "Sign In" %}</h1>
+		<a class="btn btn-secondary d-flex align-items-center justify-content-center w-100 py-2 mb-3" href="{% provider_login_url 'google' %}">
+			<img src="{% static 'images/g-logo.svg' %}" alt="Google" height="28px" class="d-block w-auto me-2">
+			{% trans "Sign in with Google" %}
+		</a>
+		<div class="position-relative my-4 opacity-50">
+			<hr />
+			<div class="position-absolute top-50 start-50 translate-middle px-3 text-body-secondary" style="background-color: var(--bs-content-bg);">{% trans "OR" %}</div>
+		</div>
 		<form class="login" method="POST" action="{% url 'account_login' %}">
 			{% csrf_token %}
 			{% if form.non_field_errors %}

diff --git a/backend/templates/account/signup.html b/backend/templates/account/signup.html
@@ -1,15 +1,20 @@
 {% extends "account/base.html" %}
-{% load account static i18n %}
+{% load account socialaccount static i18n %}
 
 {% block head_title %}{% trans "Sign Up" %} - SocialPass{% endblock %}
 
 {% block inner %}
 <div class="card border-0 rounded-4 shadow-sm">
 	<div class="card-body p-lg-4">
-		<h1 class="h3 mb-0">{% trans "Sign Up" %}</h1>
-		<p class="text-body-secondary">
-			{% trans "Please fill out the following form to sign up and create your account." %}
-		</p>
+		<h1 class="h3 mb-4">{% trans "Sign Up" %}</h1>
+		<a class="btn btn-secondary d-flex align-items-center justify-content-center w-100 py-2 mb-3" href="{% provider_login_url 'google' %}">
+			<img src="{% static 'images/g-logo.svg' %}" alt="Google" height="28px" class="d-block w-auto me-2">
+			{% trans "Sign up with Google" %}
+		</a>
+		<div class="position-relative my-4 opacity-50">
+			<hr />
+			<div class="position-absolute top-50 start-50 translate-middle px-3 text-body-secondary" style="background-color: var(--bs-content-bg);">{% trans "OR" %}</div>
+		</div>
 		<form class="signup" method="POST" action="{% url 'account_signup' %}">
 			{% csrf_token %}
 			{% if form.non_field_errors %}