We’ve seen in other posts that we can use OAuth2-proxy to provide OAuth2 authentication in our application. Today, for example, we will protect a Vue application, but instead of using oauth2-proxy, we will implement the functionality provided by oauth2-proxy directly in Python.
Our Vue application is very simple: it has only one button that shows some information. The entire Vue application, as well as the backend that serves this information (developed with Flask), will be protected and authenticated with OAuth2. For this example, we will use GitHub as the authentication provider.
<script setup lang="ts">
import {ref} from "vue";
defineProps<{
msg: string
}>()
const data = ref(null);
const showModal = ref(false);
const fetchData = async () => {
try {
const response = await fetch("/app/api/userinfo", { redirect: "manual" });
const logoutStatuses = [401, 403, 302, 303];
if (response.type === "opaqueredirect" || logoutStatuses.includes(response.status)) {
window.location.href = "/app/oauth/logout";
} else {
data.value = await response.json();
showModal.value = true;
}
} catch (error) {
console.error("Error al obtener los datos", error);
}
};
</script>
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<button @click="fetchData" class="bg-blue-500 text-white p-2 rounded">
Load data
</button>
</h3>
<div v-if="showModal" class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50">
<div class="bg-white p-6 rounded shadow-lg w-1/3">
<h2 class="text-xl font-bold mb-4">Datos del Backend</h2>
<pre class="bg-gray-100 p-3 rounded text-sm">{{ data }}</pre>
<button @click="showModal = false" class="mt-4 bg-red-500 text-white p-2 rounded">Cerrar</button>
</div>
</div>
</div>
</template>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
position: relative;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>
The Flask backend is as follows and allows us to respond with user data in a protected route and a public route.
import logging
from datetime import datetime
from flask import Flask, session
from flask_compress import Compress
from core.oauth_proxy import setup_oauth
from settings import APP_PATH, SECRET, SESSION, DEBUG, OAUTH
app = Flask(__name__)
app.debug = DEBUG
app.secret_key = SECRET
app.config.update(SESSION)
Compress(app)
for logger_name in ['werkzeug', ]:
logging.getLogger(logger_name).setLevel(logging.WARNING)
setup_oauth(app, OAUTH, APP_PATH)
@app.get(f"/{APP_PATH}/api/userinfo")
def protected_route():
now = datetime.now().isoformat()
return dict(
session=session['user'],
now=now
)
@app.get(f"/{APP_PATH}/api/no_auth")
def public_route():
return "public, route!"
In order to use OAuth2, we need to use a reverse proxy like NGINX. The NGINX configuration file is shown below.
upstream app {
server host.docker.internal:5000;
}
upstream front {
server host.docker.internal:5173;
}
server {
listen 8000;
server_tokens off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host:$server_port;
location / {
auth_request /app/oauth2/auth;
error_page 401 = @error401;
auth_request_set $auth_cookie $upstream_http_set_cookie;
try_files $uri @proxy_to_front;
}
location /app/api/ {
auth_request /app/oauth2/auth;
error_page 401 = @error401;
auth_request_set $auth_cookie $upstream_http_set_cookie;
try_files $uri @proxy_to_app;
}
location /app/api/no_auth {
try_files $uri @proxy_to_app;
}
location /app/oauth2/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Auth-Request-Redirect $request_uri;
proxy_pass http://app;
}
location @proxy_to_app {
proxy_pass http://app;
}
location @proxy_to_front {
proxy_pass http://front;
}
location @error401 {
auth_request_set $auth_cookie $upstream_http_set_cookie;
add_header Set-Cookie $auth_cookie;
return 302 /app/oauth2/sign_in;
}
}
The authentication flow is managed as follows, using a small blueprint that handles OAuth2 redirections, token exchange, and user session storage.
import logging
import secrets
from urllib.parse import urlencode
import requests
from flask import Blueprint, jsonify
from flask import request, session, redirect
logger = logging.getLogger(__name__)
def _clean_session():
session.pop('user', default=None)
session.pop('state', default=None)
session.pop('referer', default=None)
def get_oauth_proxy_blueprint(oauth_conf, app_path, *, sub_path="oauth2", callback_url='/callback',
signin_url='/sign_in', auth_url='/auth', logout_url='/logout'):
blueprint = Blueprint('oauth_proxy', __name__, url_prefix=f'/{app_path}/{sub_path}')
@blueprint.get(callback_url)
def callback():
referer = session.get('referer')
state = request.args.get('state')
session_state = session.get('state')
if 'state' not in session:
return redirect(f"{referer}")
if state == session_state:
authorization_code = request.args.get('code')
token_data = {
'grant_type': oauth_conf.get('GRANT_TYPE', 'authorization_code'),
'code': authorization_code,
'redirect_uri': oauth_conf['REDIRECT_URL'],
'client_id': oauth_conf['CLIENT_ID'],
'client_secret': oauth_conf['CLIENT_SECRET']
}
response = requests.post(oauth_conf['TOKEN_URL'],
data=token_data,
headers={'Accept': 'application/json'})
response_data = response.json()
headers = {
"Authorization": f"Bearer {response_data.get('access_token')}",
'Accept': 'application/json'
}
user_response = requests.get(oauth_conf['USER_URL'],
data=token_data,
headers=headers)
if user_response.ok:
user_data = user_response.json()
session['user'] = dict(
username=user_data['login'],
name=user_data['name'],
email=user_data['email']
)
session.pop('state', default=None)
session.pop('referer', default=None)
else:
_clean_session()
return redirect(referer)
@blueprint.get(signin_url)
def sign_in():
state = secrets.token_urlsafe(32)
session['state'] = state
authorize = oauth_conf['AUTHORIZE_URL']
query_string = urlencode({
'scope': oauth_conf.get('SCOPE', 'read write'),
'prompt': oauth_conf.get('PROMPT', 'login'),
'approval_prompt': oauth_conf.get('APPROVAL_PROMPT', 'auto'),
'state': state,
'response_type': oauth_conf.get('RESPONSE_TYPE', 'code'),
'redirect_uri': oauth_conf['REDIRECT_URL'],
'client_id': oauth_conf['CLIENT_ID']
})
return redirect(f"{authorize}?{query_string}")
@blueprint.get(auth_url)
def auth():
if not session.get("user"):
referer = request.headers.get('X-Auth-Request-Redirect')
session['referer'] = referer
return redirect(f"oauth2/sign_in", 401)
else:
return jsonify(dict(error='OK')), 200
@blueprint.get(logout_url)
def logout():
_clean_session()
return redirect(logout_url)
return blueprint
def setup_oauth(app, oauth_conf, app_path, *, sub_path="oauth2", callback_url='/callback',
signin_url='/sign_in', auth_url='/auth', logout_url='/logout'):
app.register_blueprint(get_oauth_proxy_blueprint(oauth_conf, app_path, sub_path=sub_path, callback_url=callback_url,
signin_url=signin_url, auth_url=auth_url, logout_url=logout_url))
You can see the full code of the project in my github
Gonzalo Ayuso - Web Architect 