FEAT: Added Google OAuth login feature to sign up as well as login

This commit is contained in:
JustIceO7
2025-02-11 02:22:27 +00:00
parent 07652eed0d
commit 0984271a11
11 changed files with 128 additions and 56 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -2,6 +2,7 @@ import React, { useState } from "react";
import Input from "../Layout/Input";
import Button from "../Layout/Button";
import { useAuth } from "../../context/AuthContext";
import GoogleLogin from "./OAuth";
interface LoginFormData {
username: string;
@@ -133,6 +134,7 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => {
/>
<Button type="submit">Login</Button>
<GoogleLogin />
</form>
</div>
</>

View File

@@ -0,0 +1,23 @@
import { useEffect } from "react";
export default function GoogleLogin() {
const handleLoginClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
window.location.href = "/api/login/google";
};
return (
<div>
<button
onClick={handleLoginClick}
className="flex items-center justify-start bg-white text-gray-600 font-semibold py-1 px-2 rounded shadow-md w-[220px] hover:bg-gray-100 active:bg-gray-200">
<img
src="../../../images/icons/google-icon.png"
alt="Google logo"
className="w-8 h-8 mr-2"
/>
<span className="flex-grow">Sign in with Google</span>
</button>
</div>
);
}

View File

@@ -9,6 +9,7 @@ from blueprints.stripe import stripe_bp
from blueprints.user import user_bp
from blueprints.streams import stream_bp
from blueprints.chat import chat_bp
from blueprints.oauth import oauth_bp, init_oauth
from blueprints.socket import socketio
from celery import Celery
from celery_tasks import celery_init_app
@@ -24,10 +25,13 @@ def create_app():
And setup web sockets to be used throughout the project.
"""
app = Flask(__name__)
app.config["SERVER_NAME"] = "127.0.0.1:8080"
app.config["SECRET_KEY"] = getenv("FLASK_SECRET_KEY")
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
app.config["PROPAGATE_EXCEPTIONS"] = True
app.config['GOOGLE_CLIENT_ID'] = getenv("GOOGLE_CLIENT_ID")
app.config['GOOGLE_CLIENT_SECRET'] = getenv("GOOGLE_CLIENT_SECRET")
app.config.from_mapping(
CELERY=dict(
@@ -47,6 +51,7 @@ def create_app():
Session(app)
app.before_request(logged_in_user)
init_oauth(app)
# adds in error handlers
register_error_handlers(app)
@@ -63,6 +68,7 @@ def create_app():
app.register_blueprint(user_bp)
app.register_blueprint(stream_bp)
app.register_blueprint(chat_bp)
app.register_blueprint(oauth_bp)
socketio.init_app(app)

View File

@@ -81,18 +81,13 @@ def signup():
# Create new user once input is validated
db.execute(
"""INSERT INTO users
(username, password, email, num_followers, stream_key, is_partnered, bio, current_stream_title, current_selected_category_id)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)""",
(username, password, email, stream_key)
VALUES (?, ?, ?, ?)""",
(
username,
generate_password_hash(password),
email,
0,
token_hex(32),
0,
"This user does not have a Bio.",
"My Stream",
None
token_hex(32)
)
)

View File

@@ -32,6 +32,9 @@ def admin_required(view):
return wrapped_view
def register_error_handlers(app):
"""
Default reponses to status codes
"""
error_responses = {
400: "Bad Request",
403: "Forbidden",

View File

@@ -1,60 +1,102 @@
from authlib.integrations.flask_client import OAuth, OAuthError
from flask import Blueprint, url_for, jsonify, session
from flask import Blueprint, jsonify, session, redirect
from blueprints.user import get_session_info_email
from database.database import Database
from secrets import token_hex, token_urlsafe
from random import randint
oauth_bp = Blueprint("oauth", __name__)
google = None
def init_oauth(app):
oauth = OAuth(app)
global google
google = oauth.register(
'google',
client_id=app.config['GOOGLE_CLIENT_ID'],
client_secret=app.config['GOOGLE_CLIENT_SECRET'],
authorize_url='https://accounts.google.com/o/oauth2/auth',
authorize_params=None,
access_token_url='https://accounts.google.com/o/oauth2/token',
access_token_params=None,
refresh_token_url=None,
redirect_uri=url_for('google.google_auth', _external=True),
scope='openid profile email',
access_token_url='https://oauth2.googleapis.com/token',
client_kwargs={'scope': 'openid profile email'},
api_base_url='https://www.googleapis.com/oauth2/v1/',
userinfo_endpoint='https://openidconnect.googleapis.com/v1/userinfo',
server_metadata_url='https://accounts.google.com/.well-known/openid-configuration',
redirect_uri="http://127.0.0.1:8080/api/google_auth"
)
@oauth_bp.route('/login/google')
def login_google():
"""
Redirects to Google's OAuth authorization page
"""
# Creates nonce to be sent
session["nonce"] = token_urlsafe(16)
return google.authorize_redirect(
'http://127.0.0.1:8080/api/google_auth',
nonce=session['nonce']
)
@oauth_bp.route('/login/google')
def login_google():
"""
Redirects to Google's OAuth authorization page
"""
return google.authorize_redirect(url_for('google.google_auth', _external=True))
@oauth_bp.route('/google_auth')
def google_auth():
"""
Receives token from Google OAuth and authenticates it to validate login
"""
try:
token = google.authorize_access_token()
@oauth_bp.route('/google_auth')
def google_auth():
try:
token = google.authorize_access_token()
user = google.parse_id_token(token)
# check if email exists else create a database entry
user_email = user.get("email")
# Verifies token as well as nonce
nonce = session.pop('nonce', None)
if not nonce:
return jsonify({'error': 'Missing nonce in session'}), 400
user = google.parse_id_token(token, nonce=nonce)
print(user, flush=True)
# Check if email exists to login else create a database entry
user_email = user.get("email")
user_data = get_session_info_email(user_email)
if not user_data:
with Database() as db:
# Generates a new username for the user
for _ in range(1000000):
username = user.get("given_name") + str(randint(1, 1000000))
taken = db.fetchone("""
SELECT * FROM users
WHERE username = ?
""", (username,))
if not taken:
break
db.execute(
"""INSERT INTO users
(username, email, stream_key)
VALUES (?, ?, ?)""",
(
username,
user_email,
token_hex(32),
)
)
user_data = get_session_info_email(user_email)
session.clear()
session["username"] = user_data["username"]
session["user_id"] = user_data["user_id"]
session.clear()
session["username"] = user_data["username"]
session["user_id"] = user_data["user_id"]
return jsonify({
'message': 'User authenticated successfully',
})
except OAuthError as e:
# Handle OAuth errors like failed authentication or invalid token
return jsonify({
'message': 'Authentication failed',
'error': str(e)
}), 400
# TODO: redirect back to original page user started on, or other pages based on success failure of login
return redirect("http://127.0.0.1:8080/")
except Exception as e:
# Handle other unexpected errors
return jsonify({
'message': 'An unexpected error occurred',
'error': str(e)
}), 500
except OAuthError as e:
return jsonify({
'message': 'Authentication failed',
'error': str(e)
}), 400
except Exception as e:
return jsonify({
'message': 'An unexpected error occurred',
'error': str(e)
}), 500

Binary file not shown.

View File

@@ -3,13 +3,13 @@ CREATE TABLE users
(
user_id INTEGER PRIMARY KEY AUTOINCREMENT,
username VARCHAR(50) NOT NULL,
password VARCHAR(256) NOT NULL,
password VARCHAR(256),
email VARCHAR(128) NOT NULL,
num_followers INTEGER NOT NULL,
num_followers INTEGER NOT NULL DEFAULT 0,
stream_key VARCHAR(60) NOT NULL,
is_partnered BOOLEAN NOT NULL DEFAULT 0,
is_live BOOLEAN NOT NULL DEFAULT 0,
bio VARCHAR(1024),
bio VARCHAR(1024) DEFAULT 'This user does not have a Bio.',
current_stream_title VARCHAR(100),
current_selected_category_id INTEGER

View File

@@ -27,4 +27,5 @@ gevent-websocket
flask-oauthlib==0.9.6
celery==5.2.3
redis==5.2.1
python-dateutil
python-dateutil
Authlib==1.4.1

View File

@@ -22,7 +22,7 @@ def get_username(user_id: str) -> Optional[str]:
with Database() as db:
data = db.fetchone("""
SELECT username
FROM user
FROM users
WHERE user_id = ?
""", (user_id,))
return data['username'] if data else None
@@ -31,10 +31,10 @@ def get_session_info_email(email: str) -> dict:
"""
Returns username and user_id given email
"""
with Database as db:
with Database() as db:
session_info = db.fetchone("""
SELECT user_id, username
FROM user
FROM users
WHERE email = ?
""", (email,))
return session_info