added sign in with google

5 files changed, 169 insertions, 4 deletions

diff --git a/app/__init__.py b/app/__init__.py
index 9f025af..b006c8f 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -5,12 +5,20 @@ from flask.cli import AppGroup
 from flask_sqlalchemy import SQLAlchemy
 import flask_login
 
+from authlib.integrations.flask_client import OAuth
+
 app = Flask(__name__)
 app.config.from_object('app.config')
 
 bcrypt = Bcrypt(app)
 db = SQLAlchemy(app)
 login_manager = flask_login.LoginManager()
+oauth = OAuth(app)
+
+oauth.register(
+	name="google",
+	server_metadata_url="https://accounts.google.com/.well-known/openid-configuration",
+	client_kwargs={"scope": "openid email profile"})
 
 login_manager.init_app(app)
 
diff --git a/app/config_dev.py b/app/config_dev.py
index e0b32a0..e44163a 100644
--- a/app/config_dev.py
+++ b/app/config_dev.py
@@ -1,5 +1,12 @@
+import os
+
 SQLALCHEMY_DATABASE_URI = 'sqlite:////tmp/test.db'
 SQLALCHEMY_TRACK_MODIFICATIONS = False
+
 SECRET_KEY = "tchtchtch"
+
 ADMIN_EMAIL = "admin@example.com"
-ADMIN_PASSWORD = "iamgroot"
\ No newline at end of file
+ADMIN_PASSWORD = "iamgroot"
+
+GOOGLE_CLIENT_ID=os.environ.get("GOOGLE_CLIENT_ID2")
+GOOGLE_CLIENT_SECRET=os.environ.get("GOOGLE_CLIENT_SECRET2")
\ No newline at end of file
diff --git a/app/templates/auth/signin.html b/app/templates/auth/signin.html
index eecff34..f35cbb6 100644
--- a/app/templates/auth/signin.html
+++ b/app/templates/auth/signin.html
@@ -21,8 +21,64 @@
      {{ render_field(form.password) }}
     </div>
     <div class="form-group">
-        <input class="btn btn-primary" type="submit" value="Submit">
+        <input class="btn btn-primary" type="submit" value="Log In">
     </div>
     </form>
+    <p align="center">-OR-</p>
+    <a href={{url_for("login_with_google")}}><button type="button" class="google-button bg-dark text-light">
+                <span class="google-button__icon">
+                    <svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" id="Shape" fill="#EA4335" />
+                        <path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" id="Shape" fill="#FBBC05" />
+                        <path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" id="Shape" fill="#4285F4" />
+                        <path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853" /></svg>
+                </span>
+                <span class="google-button__text">Sign in with Google</span>
+            </button></a>
 </div>
+
+<style type="text/css">
+.google-button {
+    height: 40px;
+    width: 100%;
+    border-width: 0;
+    background: white;
+    color: #737373;
+    border-radius: 5px;
+    white-space: nowrap;
+    box-shadow: 1px 1px 0px 1px rgba(0, 0, 0, 0.05);
+    transition-property: background-color, box-shadow;
+    transition-duration: 150ms;
+    transition-timing-function: ease-in-out;
+    padding: 0;
+
+    &:focus,
+    &:hover {
+        box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
+    }
+
+    &:active {
+        background-color: #e5e5e5;
+        box-shadow: none;
+        transition-duration: 10ms;
+    }
+}
+
+.google-button__icon {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 8px 0 8px 8px;
+    width: 18px;
+    box-sizing: border-box;
+}
+
+.google-button__text {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0 24px;
+    font-size: 14px;
+    font-weight: bold;
+    font-family: 'Roboto', arial, sans-serif;
+}
+</style>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/auth/signup.html b/app/templates/auth/signup.html
index e0cae82..dbe9ca6 100644
--- a/app/templates/auth/signup.html
+++ b/app/templates/auth/signup.html
@@ -34,5 +34,62 @@
         <input class="btn btn-primary" type="submit" value="Submit">
     </div>
     </form>
+    <p align="center">-OR-</p>
+    <a href={{url_for("login_with_google")}}><button type="button" class="google-button bg-dark text-light">
+                <span class="google-button__icon">
+                    <svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" id="Shape" fill="#EA4335" />
+                        <path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" id="Shape" fill="#FBBC05" />
+                        <path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" id="Shape" fill="#4285F4" />
+                        <path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853" /></svg>
+                </span>
+                <span class="google-button__text">Sign Up with Google</span>
+            </button></a>
 </div>
+
+<style type="text/css">
+.google-button {
+    height: 40px;
+    width: 100%;
+    border-width: 0;
+    background: white;
+    color: #737373;
+    border-radius: 5px;
+    white-space: nowrap;
+    box-shadow: 1px 1px 0px 1px rgba(0, 0, 0, 0.05);
+    transition-property: background-color, box-shadow;
+    transition-duration: 150ms;
+    transition-timing-function: ease-in-out;
+    padding: 0;
+
+    &:focus,
+    &:hover {
+        box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
+    }
+
+    &:active {
+        background-color: #e5e5e5;
+        box-shadow: none;
+        transition-duration: 10ms;
+    }
+}
+
+.google-button__icon {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 8px 0 8px 8px;
+    width: 18px;
+    box-sizing: border-box;
+}
+
+.google-button__text {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0 24px;
+    font-size: 14px;
+    font-weight: bold;
+    font-family: 'Roboto', arial, sans-serif;
+}
+</style>
+
 {% endblock %}
\ No newline at end of file
diff --git a/app/views/auth.py b/app/views/auth.py
index eb9a46a..983380e 100644
--- a/app/views/auth.py
+++ b/app/views/auth.py
@@ -1,11 +1,10 @@
-from app import app, db, models, login_manager
+from app import app, db, models, login_manager, oauth
 from app.forms.app_forms import UserSignUp, UserLogIn 
 from flask import render_template, flash,url_for, redirect
 from app.misc_func import flash_errors
 import flask_login
 from sqlalchemy.exc import IntegrityError
 
-
 @app.route("/signup", methods=['GET', 'POST'])
 def register_user():
     form = UserSignUp()
@@ -45,6 +44,44 @@ def signin_user():
         flash_errors(form)
     return render_template("auth/signin.html",form=form) 
 
+@app.route("/login/with/google")
+def login_with_google():
+    redirect_uri = url_for("login_with_google_auth", _external=True)
+    return oauth.google.authorize_redirect(redirect_uri)
+
+
+@app.route("/login/with/google/callback")
+def login_with_google_auth():
+    token = oauth.google.authorize_access_token()
+    g_user = oauth.google.parse_id_token(token)
+    print(g_user)
+    if g_user["email_verified"]:
+        user = models.User(
+            first_name=g_user["given_name"],
+            last_name=g_user["family_name"],
+            email=g_user["email"],
+            confirmation=True,
+            login_type="google")
+        db.session.add(user)
+        try:
+            db.session.commit()
+            flask_login.login_user(user)
+            return redirect(url_for("user_dashboard"))
+        except IntegrityError:
+            db.session.rollback()
+            user = models.User.query.filter_by(email=g_user["email"]).first()
+            if user.login_type == "google":
+                flask_login.login_user(user)
+                return redirect(url_for("user_dashboard"))
+            else:
+                flash("An account already exists for this email. Please use your password to log in.")
+                return redirect(url_for("signin_user"))
+    else:
+        return render_template(
+            "message.html",
+            message="To use sign-in with Google, you need a verified e-mail.",
+        )
+
 @app.route("/dashboard")
 @flask_login.login_required
 def user_dashboard():