feat(auth): supports Github OAuth 2.0

Author: joonas-yoon

fastapi/app/auth/github/constants.py

@@ -0,0 +1 @@
+GITHUB_USERINFO_URL = 'https://api.github.com/user'

fastapi/app/auth/github/libs.py

@@ -0,0 +1,56 @@
+from datetime import datetime
+from typing import Any, Optional
+
+import requests
+from fastapi import Response
+from fastapi_users.authentication import AuthenticationBackend
+from fastapi_users.authentication.strategy import Strategy
+
+from ..exceptions import BadCredentialException
+from ..libs import bearer_transport, get_jwt_strategy
+from ..models import User
+from .constants import GITHUB_USERINFO_URL
+
+
+class GithubAuthBackend(AuthenticationBackend):
+    async def login(self, strategy: Strategy, user: User, response: Response) -> Any:
+        strategy_response = await super().login(strategy, user, response)
+        token = self.get_google_access_token(user)
+        profile = get_profile(token)
+        user.first_name = profile.get('first_name')
+        user.last_name = profile.get('last_name')
+        user.picture = profile.get('avatar_url')
+        user.last_login_at = datetime.now()
+        await user.save()
+        return strategy_response
+
+    def get_google_access_token(self, user: User) -> Optional[str]:
+        for account in user.oauth_accounts:
+            if account.oauth_name == 'github':
+                return account.access_token
+        return None
+
+
+def get_profile(access_token: str) -> dict:
+    headers = dict(Authorization=f'Bearer {access_token}')
+    response = requests.get(GITHUB_USERINFO_URL, headers=headers)
+    if not response.ok:
+        raise BadCredentialException(
+            'Failed to get user information from Github.')
+    profile = dict(response.json())
+    name = profile.get('name').split()
+    try:
+        profile.update({
+            "first_name": name[0],
+            "last_name": name[1],
+        })
+    except:
+        pass
+    return profile
+
+
+auth_backend_github = GithubAuthBackend(
+    name="jwt-github",
+    transport=bearer_transport,
+    get_strategy=get_jwt_strategy,
+)

fastapi/app/auth/github/routes.py

@@ -0,0 +1,19 @@
+
+from app.configs import Configs
+from httpx_oauth.clients.github import GitHubOAuth2
+
+from ..libs import fastapi_users
+from .libs import auth_backend_github
+
+github_oauth_client = GitHubOAuth2(
+    client_id=Configs.GITHUB_CLIENT_ID,
+    client_secret=Configs.GITHUB_CLIENT_SECRET,
+)
+
+github_oauth_router = fastapi_users.get_oauth_router(
+    oauth_client=github_oauth_client,
+    backend=auth_backend_github,
+    state_secret=Configs.SECRET_KEY,
+    redirect_url=Configs.GITHUB_CALLBACK_URL,
+    associate_by_email=True,
+)

fastapi/app/auth/routes.py

@@ -1,6 +1,7 @@
 from fastapi import APIRouter, Depends
 
 from .google.routes import google_oauth_router
+from .github.routes import github_oauth_router
 from .libs import auth_backend, current_active_user, fastapi_users
 from .models import User, UserCreate, UserRead, UserUpdate
 
@@ -20,6 +21,7 @@
     (get_reset_password_router, dict(prefix="/auth", tags=["auth"])),
     (get_verify_router, dict(prefix="/auth", tags=["auth"])),
     (google_oauth_router, dict(prefix="/auth/google", tags=["auth"])),
+    (github_oauth_router, dict(prefix="/auth/github", tags=["auth"])),
     (get_users_router, dict(prefix="/users", tags=["users"])),
 ]
 

fastapi/app/configs.py

@@ -31,6 +31,10 @@ class Settings(BaseSettings):
     GOOGLE_CLIENT_SECRET: str = None
     GOOGLE_CALLBACK_URL: str = None
 
+    GITHUB_CLIENT_ID: str = None
+    GITHUB_CLIENT_SECRET: str = None
+    GITHUB_CALLBACK_URL: str = None
+
     class Config:
         env_file = get_env_file()
 

react-app/src/App.js

@@ -21,6 +21,7 @@ const App = () => {
             <Route path="/login">
               <Route index element={<Auth.Login />} />
               <Route path="google" element={<Auth.Redirects.Google />} />
+              <Route path="github" element={<Auth.Redirects.Github />} />
             </Route>
             <Route path="/logout" element={<Auth.Logout />} />
             <Route path="/my" element={<MyPage />} />

react-app/src/pages/Auth.jsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { FcGoogle } from 'react-icons/fc';
+import { FaGithub } from 'react-icons/fa';
 import { OAuth } from 'components/Buttons';
 import { customAxios } from 'libs/customAxios';
 import qs from 'qs';
@@ -54,19 +55,24 @@ export const Login = () => {
       });
   };
 
-  const onClickGoogleButton = (evt) => {
-    evt.preventDefault();
+  const handleOAuth = (link) => {
     customAxios()
-      .get('/auth/google/authorize')
+      .get(link)
       .then((response) => {
         const { authorization_url } = response.data;
         window.location.href = authorization_url;
       })
       .catch((e) => console.log('log', e));
   };
 
+  const onClickGoogleButton = (evt) => {
+    evt.preventDefault();
+    handleOAuth('/auth/google/authorize');
+  };
+
   const onClickGitHubButton = (evt) => {
     evt.preventDefault();
+    handleOAuth('/auth/github/authorize');
   };
 
   const onClickKakaoButton = (evt) => {
@@ -176,10 +182,50 @@ const CallbackGoogle = () => {
   );
 };
 
+const CallbackGithub = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { login } = useAuth();
+
+  useEffect(() => {
+    customAxios()
+      .get('/auth/github/callback' + location.search)
+      .then(({ data }) => {
+        console.log('Recieved data', data);
+        login({
+          token: data.access_token,
+        });
+      })
+      .catch(({ response }) => {
+        console.error(response);
+        navigate('/login', {
+          replace: true,
+          state: {
+            from: location,
+            message: 'Failed to authroize with Github',
+          },
+        });
+      });
+  }, [location]);
+
+  return (
+    <LoginContainer>
+      <Card>
+        <Box sx={{ width: '100%', textAlign: 'center', fontSize: '5em', marginBottom: '10px' }}>
+          <FaGithub />
+          <LinearProgress />
+        </Box>
+        <Typography>Waiting for GitHub Sign-in to complete...</Typography>
+      </Card>
+    </LoginContainer>
+  );
+};
+
 export default {
   Login,
   Logout,
   Redirects: {
     Google: CallbackGoogle,
+    Github: CallbackGithub,
   },
 };