docs: 🐛 stop api call when user is granted

Signed-off-by: slumbering <slumbering.pierrot@gmail.com>
This commit is contained in:
slumbering 2021-06-18 11:33:48 +02:00
parent d5c575b154
commit 1bd1be5cb1
5 changed files with 17 additions and 20 deletions

View File

@ -65,6 +65,7 @@ module.exports = {
[ [
"docusaurus2-dotenv", { "docusaurus2-dotenv", {
systemvars: true, systemvars: true,
expand: true,
}, },
] ]
], ],

View File

@ -21,7 +21,7 @@ function bindApiCall({ url, config, errorMessage }) {
async function getAccessToken(code) { async function getAccessToken(code) {
const accessToken = await bindApiCall({ const accessToken = await bindApiCall({
url: '/github-proxy/login/oauth/access_token', url: `${process.env.REACT_APP_API_PROXY_ENABLE ? '/github-proxy' : 'https://github.com' }/login/oauth/access_token`,
config: { config: {
params: { params: {
code, code,
@ -37,7 +37,7 @@ async function getAccessToken(code) {
export async function getUser(access_token) { export async function getUser(access_token) {
const user = await bindApiCall({ const user = await bindApiCall({
url: '/github-api-proxy/user', url: `${process.env.REACT_APP_API_PROXY_ENABLE ? '/github-api-proxy' : 'https://api.github.com'}/user`,
config: { config: {
headers: { Authorization: `token ${access_token}` }, headers: { Authorization: `token ${access_token}` },
}, },
@ -57,12 +57,11 @@ export async function checkUserCollaboratorStatus(code) {
const { login } = await getUser(access_token) const { login } = await getUser(access_token)
const isUserCollaborator = await bindApiCall({ const isUserCollaborator = await bindApiCall({
url: `/docs-access/${login}`, url: `${process.env.REACT_APP_API_PROXY_ENABLE ? '/docs-access' : 'https://j20f3pfq11.execute-api.us-east-1.amazonaws.com/Prod/u'}/${login}`,
errorMessage: 'error checkUserCollaboratorStatus' errorMessage: 'error checkUserCollaboratorStatus'
}) })
return { return {
isAllowed: isUserCollaborator.data, isAllowed: isUserCollaborator.data
access_token
} }
} }

View File

@ -7,7 +7,7 @@ export default function DocAuthentication() {
<div className={style.container}> <div className={style.container}>
<h1 className={style.h1}>Welcome on Dagger documentation</h1> <h1 className={style.h1}>Welcome on Dagger documentation</h1>
<p>Please Sign In to Github to get access to the doc</p> <p>Please Sign In to Github to get access to the doc</p>
<GithubLoginButton className={style.btn__github} onClick={() => window.location.href = `//github.com/login/oauth/authorize?client_id=${process.env.REACT_APP_CLIENT_ID}&scope=user&allow_signup=false`} /> <GithubLoginButton className={style.btn__github} onClick={() => window.location.href = process.env.REACT_APP_GITHUB_AUTHORIZE_URI} />
</div> </div>
) )
} }

View File

@ -6,7 +6,7 @@ export default function DocPageRedirect() {
const [counter, setCounter] = useState(10) const [counter, setCounter] = useState(10)
useEffect(() => { useEffect(() => {
setTimeout(() => window.location.href = "https://dagger.io", 10000) setTimeout(() => window.location.href = process.env.REACT_APP_DAGGER_SITE_URI, 10000)
setInterval(() => setCounter((prevState) => prevState - 1), 1000) setInterval(() => setCounter((prevState) => prevState - 1), 1000)
}, []) }, [])
@ -18,7 +18,7 @@ export default function DocPageRedirect() {
<p>It seems you don't have the permission to see Dagger's documentation. But don't worry you can request an Eary Access :). You'll be redirect to Dagger website in {counter} seconds </p> <p>It seems you don't have the permission to see Dagger's documentation. But don't worry you can request an Eary Access :). You'll be redirect to Dagger website in {counter} seconds </p>
<p>See you soon !</p> <p>See you soon !</p>
<br /> <br />
<small><strong>If nothing happen, <a href="https://dagger.io">click here</a> to go to Dagger website</strong></small> <small><strong>If nothing happen, <a href={process.env.REACT_APP_DAGGER_SITE_URI}>click here</a> to go to Dagger website</strong></small>
</div> </div>
<div className="col col--4"> <div className="col col--4">
<img src="/img/dagger-astronaute.png" alt="" /> <img src="/img/dagger-astronaute.png" alt="" />

View File

@ -21,7 +21,7 @@ import { ThemeClassNames, docVersionSearchTag } from '@docusaurus/theme-common';
import { Redirect } from "react-router"; import { Redirect } from "react-router";
import qs from 'querystringify'; import qs from 'querystringify';
import isEmpty from 'lodash/isEmpty'; import isEmpty from 'lodash/isEmpty';
import { checkUserCollaboratorStatus, getUser } from '../../api/github' import { checkUserCollaboratorStatus } from '../../api/github'
import { GithubLoginButton } from 'react-social-login-buttons'; import { GithubLoginButton } from 'react-social-login-buttons';
import Spinner from '../../components/Spinner'; import Spinner from '../../components/Spinner';
import DocPageAuthentication from '../../components/DocPageAuthentication'; import DocPageAuthentication from '../../components/DocPageAuthentication';
@ -139,34 +139,31 @@ function DocPage(props) {
); );
// CUSTOM DOCPAGE // CUSTOM DOCPAGE
// Do not use Github authentication when in local env or Netlify deploy preview if (!!process.env.REACT_APP_OAUTH_ENABLE) {
if (typeof window === "undefined" ||
(typeof window !== "undefined" && window?.location?.hostname !== "localhost" && !window.location.hostname.includes('deploy'))) {
const [isUserAuthorized, setIsUserAuthorized] = useState() const [isUserAuthorized, setIsUserAuthorized] = useState()
const [isLoading, setIsLoading] = useState(true) const [isLoading, setIsLoading] = useState(true)
const [redirectState, setRedirectState] = useState() const [redirectState, setRedirectState] = useState()
const authQuery = qs.parse(location.search); const authQuery = qs.parse(location.search);
const [userAccessToken, setUserAccessToken] = useState((() => { const [userAccessStatus, setUserAccessStatus] = useState((() => {
if (typeof window !== "undefined") return window.localStorage.getItem('user-github-key') if (typeof window !== "undefined") return window.localStorage.getItem('user-github-isAllowed')
})()) })())
useEffect(async () => { useEffect(async () => {
if (userAccessToken) { if (userAccessStatus) {
const user = await getUser(userAccessToken) setIsUserAuthorized(userAccessStatus)
setIsUserAuthorized(user)
} else { } else {
if (!isEmpty(authQuery)) { //callback after successful auth with github if (!isEmpty(authQuery)) { //callback after successful auth with github
const isUserCollaborator = await checkUserCollaboratorStatus(authQuery.code); const isUserCollaborator = await checkUserCollaboratorStatus(authQuery.code);
if (isUserCollaborator?.isAllowed) { if (isUserCollaborator?.isAllowed) {
setUserAccessToken(isUserCollaborator.access_token) setUserAccessStatus(isUserCollaborator?.isAllowed)
if (typeof window !== "undefined") window.localStorage.setItem('user-github-key', isUserCollaborator.access_token); if (typeof window !== "undefined") window.localStorage.setItem('user-github-isAllowed', isUserCollaborator?.isAllowed);
} }
setIsUserAuthorized(isUserCollaborator?.isAllowed) setIsUserAuthorized(isUserCollaborator?.isAllowed)
} }
} }
setIsLoading(false) setIsLoading(false)
}, [userAccessToken]) }, [userAccessStatus])
if (isLoading) return <Spinner /> if (isLoading) return <Spinner />