mirror of https://github.com/ctk-hq/ctk
feat: github auth
corpulent
2 years ago
parent
64b33b28d5
commit
0e4f9250d4
@ -0,0 +1,11 @@
|
||||
import os
|
||||
from allauth.socialaccount.providers.github.views import GitHubOAuth2Adapter
|
||||
from allauth.socialaccount.providers.oauth2.client import OAuth2Client
|
||||
from dj_rest_auth.registration.views import SocialLoginView
|
||||
|
||||
APP_URL = os.environ.get("APP_URL", "")
|
||||
|
||||
class GitHubLogin(SocialLoginView):
|
||||
adapter_class = GitHubOAuth2Adapter
|
||||
callback_url = f"{APP_URL}/github/cb"
|
||||
client_class = OAuth2Client
|
||||
@ -0,0 +1,33 @@
|
||||
import {
|
||||
REACT_APP_GITHUB_CLIENT_ID,
|
||||
REACT_APP_GITHUB_SCOPE
|
||||
} from "../../../constants";
|
||||
|
||||
const LoginBtn = () => {
|
||||
return (
|
||||
<div className="relative flex justify-center text-sm mt-6">
|
||||
<a
|
||||
href={`https://github.com/login/oauth/authorize?scope=${REACT_APP_GITHUB_SCOPE}&client_id=${REACT_APP_GITHUB_CLIENT_ID}`}
|
||||
className="flex flex-row space-x-2 w-full inline-flex justify-center py-2 px-4 border border-gray-800 rounded-md shadow-sm bg-white text-sm font-medium text-gray-800 hover:bg-gray-50"
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginBtn;
|
||||
@ -0,0 +1,71 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { LOCAL_STORAGE } from "../../../constants";
|
||||
import { toaster } from "../../../utils";
|
||||
import { socialAuth } from "../../../hooks/useSocialAuth";
|
||||
import { authLoginSuccess } from "../../../reducers";
|
||||
import Spinner from "../../global/Spinner";
|
||||
|
||||
interface IGitHubProps {
|
||||
dispatch: any;
|
||||
}
|
||||
|
||||
const GitHub = (props: IGitHubProps) => {
|
||||
const navigate = useNavigate();
|
||||
const { dispatch } = props;
|
||||
const [searchParams] = useSearchParams();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const code = searchParams.get("code");
|
||||
|
||||
useEffect(() => {
|
||||
if (code) {
|
||||
setLoading(true);
|
||||
socialAuth(code)
|
||||
.then((data: any) => {
|
||||
localStorage.setItem(
|
||||
LOCAL_STORAGE,
|
||||
JSON.stringify({
|
||||
access_token: data.access_token,
|
||||
refresh_token: data.refresh_token
|
||||
})
|
||||
);
|
||||
dispatch(authLoginSuccess(data));
|
||||
navigate("/");
|
||||
})
|
||||
.catch(() => {
|
||||
localStorage.removeItem(LOCAL_STORAGE);
|
||||
navigate(`/login`);
|
||||
toaster(`Something went wrong! Session may have expired.`, "error");
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
} else {
|
||||
navigate(`/login`);
|
||||
}
|
||||
}, [code]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="text-center"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "calc(60vh - 120px)"
|
||||
}}
|
||||
>
|
||||
<div className="flex">
|
||||
{loading && (
|
||||
<div className="flex flex-row items-center space-x-2">
|
||||
<Spinner className="w-6 h-6 text-blue-600" />
|
||||
<span className="text-base text-gray-800">logging in...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GitHub;
|
||||
@ -1,3 +1,6 @@
|
||||
export const API_SERVER_URL = process.env.REACT_APP_API_SERVER;
|
||||
export const REACT_APP_GITHUB_CLIENT_ID =
|
||||
process.env.REACT_APP_GITHUB_CLIENT_ID;
|
||||
export const REACT_APP_GITHUB_SCOPE = process.env.REACT_APP_GITHUB_SCOPE;
|
||||
export const PROJECTS_FETCH_LIMIT = 300;
|
||||
export const LOCAL_STORAGE = "CtkLocalStorage";
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
import axios from "axios";
|
||||
import { API_SERVER_URL } from "../constants";
|
||||
|
||||
export const socialAuth = async (code: string) => {
|
||||
const response = await axios({
|
||||
method: "post",
|
||||
url: `${API_SERVER_URL}/auth/github/`,
|
||||
data: {
|
||||
code: code
|
||||
},
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
return response.data;
|
||||
};
|
||||
Loading…
Reference in New Issue