Add social linking for Github

Author: silentworks

app/account.py

@@ -109,6 +109,66 @@ def update_password():
 
     return render_template("account/update-password.html", form=form, profile=profile)
 
+@account.route("/connect", methods=["GET", "POST"])
+@login_required
+@profile_required
+def list_identities():
+    profile = get_profile_by_user()
+    res = supabase.auth.get_user_identities()
+    identities = res.identities
+    connected_identities = list(
+        map(lambda identity: identity.provider, res.identities)
+    )
+    form = UpdatePasswordForm()
+    if form.validate_on_submit():
+        password = form.password.data
+
+        try:
+            user = supabase.auth.update_user(attributes={"password": password})
+
+            if user:
+                flash("Your password was updated successfully.", "info")
+                session.pop("password_update_required", None)
+            else:
+                flash("Updating your password failed, please try again.", "error")
+        except AuthApiError as exception:
+            err = exception.to_dict()
+            flash(err.get("message"), "error")
+
+    return render_template("account/identities.html", 
+                           profile=profile, 
+                           identities=identities, 
+                           connected_identities=connected_identities,
+                           )
+
+@account.route("/connect/github")
+@login_required
+def link_github():
+    resp = supabase.auth.link_identity(
+        {
+            "provider": "github",
+            "options": {"redirect_to": f"{request.host_url}auth/callback?next=account.list_identities"},
+        }
+    )
+    flash(f"{'github'.title()} was successfully linked.", "info")
+
+    return redirect(resp.url)
+
+@account.route("/connect/<provider>/disconnect")
+@login_required
+def unlink_provider(provider):
+    try:
+        res = supabase.auth.get_user_identities()
+        identity = list(
+            filter(lambda identity: identity.provider == provider, res.identities)
+        ).pop()
+        res = supabase.auth.unlink_identity(identity)
+        flash(f"{identity.provider.title()} was successfully unlinked.", "info")
+    except AuthApiError as exception:
+        err = exception.to_dict()
+        flash(err.get("message"), "error")
+
+    return redirect(url_for("account.list_identities"))
 
 @account.route("/delete", methods=["POST"])
 @login_required

app/auth.py

@@ -1,5 +1,6 @@
 import os
 from flask import Blueprint, render_template, redirect, request, session, url_for, flash
+from supabase_auth import VerifyEmailOtpParams, VerifyTokenHashParams
 from app.forms import AuthForm, ForgotPasswordForm, VerifyTokenForm
 from app.supabase import supabase
 from supabase import AuthApiError
@@ -92,14 +93,14 @@ def forgot_password():
 @auth.route("/confirm")
 def confirm():
     token_hash = request.args.get("token_hash")
-    auth_type = request.args.get("type")
+    auth_type = request.args.get("type", "email")
     next = request.args.get("next", "notes.home")
 
     if token_hash and auth_type:
         if auth_type == "recovery":
             session["password_update_required"] = True
 
-        supabase.auth.verify_otp(params={"token_hash": token_hash, "type": auth_type})
+        _ = supabase.auth.verify_otp(params=VerifyTokenHashParams(token_hash=token_hash, type=auth_type))
 
     return redirect(url_for(next))
 
@@ -110,7 +111,7 @@ def callback():
     next = request.args.get("next", "notes.home")
 
     if code:
-        res = supabase.auth.exchange_code_for_session({"auth_code": code})
+        _ = supabase.auth.exchange_code_for_session({"auth_code": code})
 
     return redirect(url_for(next))
 
@@ -129,8 +130,8 @@ def verify_token():
                 session["password_update_required"] = True
 
         try:
-            supabase.auth.verify_otp(
-                params={"email": email, "token": token, "type": auth_type}
+            _ = supabase.auth.verify_otp(
+                params=VerifyEmailOtpParams(email=email, token=token, type=auth_type)
             )
             return redirect(url_for(next))
         except AuthApiError as exception:

static/app.css

@@ -2573,6 +2573,10 @@ html {
   margin-right: 1.5rem;
 }
 
+.mt-0 {
+  margin-top: 0px;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -2601,10 +2605,6 @@ html {
   margin-top: auto;
 }
 
-.mt-0 {
-  margin-top: 0px;
-}
-
 .block {
   display: block;
 }
@@ -2764,12 +2764,6 @@ html {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
-.space-y-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
-}
-
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2888,6 +2882,11 @@ html {
   background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
 }
 
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+
 .p-12 {
   padding: 3rem;
 }
@@ -3019,6 +3018,11 @@ html {
   line-height: 1;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -3034,11 +3038,6 @@ html {
   line-height: 1rem;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -3088,6 +3087,11 @@ html {
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+
 .text-gray-800 {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity, 1));
@@ -3123,11 +3127,6 @@ html {
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
 
-.text-red-600 {
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -3138,9 +3137,14 @@ html {
   color: rgb(253 224 71 / var(--tw-text-opacity, 1));
 }
 
-.text-gray-600 {
+.text-blue-600 {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+}
+
+.text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
 }
 
 .underline {
@@ -3213,6 +3217,11 @@ html {
   color: rgb(248 113 113 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .group:hover .group-hover\:inline {
   display: inline;
 }
@@ -3326,10 +3335,6 @@ html {
     width: 25%;
   }
 
-  .\32xl\:w-11\/12 {
-    width: 91.666667%;
-  }
-
   .\32xl\:w-5\/12 {
     width: 41.666667%;
   }

supabase/config.toml

@@ -66,6 +66,31 @@ enable_refresh_token_rotation = true
 refresh_token_reuse_interval = 10
 # Allow/disallow new user signups to your project.
 enable_signup = true
+# Allow/disallow anonymous sign-ins to your project.
+enable_anonymous_sign_ins = true
+# Allow/disallow testing manual linking of accounts
+enable_manual_linking = true
+# Passwords shorter than this value will be rejected as weak. Minimum 6, recommended 8 or more.
+minimum_password_length = 6
+# Passwords that do not meet the following requirements will be rejected as weak. Supported values
+# are: `letters_digits`, `lower_upper_letters_digits`, `lower_upper_letters_digits_symbols`
+password_requirements = ""
+
+[auth.rate_limit]
+# Number of emails that can be sent per hour. Requires auth.email.smtp to be enabled.
+email_sent = 2
+# Number of SMS messages that can be sent per hour. Requires auth.sms to be enabled.
+sms_sent = 30
+# Number of anonymous sign-ins that can be made per hour per IP address. Requires enable_anonymous_sign_ins = true.
+anonymous_users = 30
+# Number of sessions that can be refreshed in a 5 minute interval per IP address.
+token_refresh = 150
+# Number of sign up and sign-in requests that can be made in a 5 minute interval per IP address (excludes anonymous users).
+sign_in_sign_ups = 30
+# Number of OTP / Magic link verifications that can be made in a 5 minute interval per IP address.
+token_verifications = 30
+# Number of Web3 logins that can be made in a 5 minute interval per IP address.
+web3 = 30
 
 [auth.email]
 # Allow/disallow new user signups via email to your project.

templates/account/identities.html

@@ -0,0 +1,36 @@
+{% extends "layout.html" %}
+{% import "_helpers.html" as h %}
+{% set active_page = "account.home" %}
+
+{% block title %}Connect Social{% endblock %}
+
+{% block content %}
+<div class="w-11/12 p-12 px-6 py-10 lg:w-full 2xl:w-5/12 sm:px-10 sm:py-6">
+    <h2 class="font-semibold text-2xl mb-4">Connect Social</h2>
+    <p class="font-medium mb-10">
+        Hi {{ profile.display_name or user.email }}, you can update your social auth from here
+    </p>
+
+    {{ h.alert('mb-10') }}
+    <ul class="divide-y-2 divide-gray-200">
+      {% if "email" in connected_identities %}
+        <li class="flex gap-2 items-center justify-between py-2">
+          <h3 class="grow text-base leading-6 font-semibold">Email</h3>
+          <p class="block p-3 text-blue-600">Connected</p>
+        </li>
+      {% endif %}
+        <li class="flex gap-2 items-center justify-between py-2">
+          <h3 class="grow text-base leading-6 font-semibold">Github</h3>
+          {% if connected_identities | length < 2 %}
+            <p class="block p-3 text-blue-600">Connected</p>
+          {% else %}
+            {% if "github" in connected_identities %}
+              <a class="block p-3 rounded-lg border border-red-300 text-red-300 hover:bg-red-600 hover:text-white" href="{{ url_for('account.unlink_provider', provider='github') }}">Disconnect</a>
+            {% else %}
+              <a class="block p-3 hover:bg-blue-600 hover:text-blue-200" href="{{ url_for('account.link_github') }}">Connect</a>
+            {% endif %}
+          {% endif %}
+        </li>
+    </ul>
+</div>
+{% endblock %}

templates/account/index.html

@@ -14,13 +14,16 @@ <h2 class="font-semibold text-2xl mb-4">Account</h2>
     {{ h.alert('mb-10') }}
     <ul class="divide-y-2 divide-gray-200">
         <li class="flex justify-between hover:bg-blue-600 hover:text-blue-200">
-            <a class="block w-full p-3" href="/account/update">Update</a>
+          <a class="block w-full p-3" href="{{ url_for('account.update') }}">Update</a>
         </li>
         <li class="flex justify-between hover:bg-blue-600 hover:text-blue-200">
-            <a class="block w-full p-3" href="/account/update-email">Update email</a>
+          <a class="block w-full p-3" href="{{ url_for('account.update_email') }}">Update email</a>
         </li>
         <li class="flex justify-between hover:bg-blue-600 hover:text-blue-200">
-            <a class="block w-full p-3" href="/account/update-password">Update password</a>
+            <a class="block w-full p-3" href="{{ url_for('account.update_password') }}">Update password</a>
+        </li>
+        <li class="flex justify-between hover:bg-blue-600 hover:text-blue-200">
+            <a class="block w-full p-3" href="{{ url_for('account.list_identities') }}">Connect social</a>
         </li>
     </ul>
     <div class="flex flex-col justify-between border border-red-300 rounded-md p-4 mt-10">