update login flow to prevent session leakage

This commit is contained in:
41666 2022-01-31 23:32:41 -05:00
parent be826b613e
commit 1cb04c8b5a
4 changed files with 41 additions and 30 deletions

View file

@ -1,4 +1,6 @@
import { redirectTo } from '@reach/router';
import { useLocation, useNavigate } from '@reach/router';
import { palette } from '@roleypoly/design-system/atoms/colors';
import { Link } from '@roleypoly/design-system/atoms/typography';
import { AuthLogin } from '@roleypoly/design-system/templates/auth-login';
import { GenericLoadingTemplate } from '@roleypoly/design-system/templates/generic-loading';
import { GuildSlug } from '@roleypoly/types';
@ -12,21 +14,23 @@ const Login = (props: { path: string }) => {
const { apiUrl } = useApiContext();
const { isAuthenticated } = useSessionContext();
const { getGuildSlug } = useGuildContext();
const navigate = useNavigate();
const location = useLocation();
// If ?r is in query, then let's render the slug page
// If not, redirect.
const [guildSlug, setGuildSlug] = React.useState<GuildSlug | null>(null);
const [oauthLink, setOauthLink] = React.useState(`${apiUrl}/auth/bounce`);
React.useEffect(() => {
const url = new URL(window.location.href);
const url = new URL(location.href);
const callbackHost = new URL('/', url);
const redirectServerID = url.searchParams.get('r');
const redirectUrl = `${apiUrl}/auth/bounce?cbh=${callbackHost.href}`;
if (!redirectServerID) {
if (isAuthenticated) {
redirectTo('/servers');
navigate('/servers');
}
window.location.href = redirectUrl;
navigate(redirectUrl);
return;
}
@ -43,12 +47,21 @@ const Login = (props: { path: string }) => {
fetchGuildSlug(redirectServerID);
if (isAuthenticated) {
redirectTo(`/s/${redirectServerID}`);
navigate(`/s/${redirectServerID}`);
}
}, [apiUrl, getGuildSlug, isAuthenticated]);
}, [apiUrl, getGuildSlug, isAuthenticated, location, navigate]);
if (guildSlug === null) {
return <GenericLoadingTemplate>Sending you to Discord...</GenericLoadingTemplate>;
return (
<GenericLoadingTemplate>
<div style={{ textAlign: 'center' }}>
<div>Sending you to Discord...</div>
<Link style={{ color: palette.taupe400 }} href={oauthLink}>
If you aren't redirected soon, click here.
</Link>
</div>
</GenericLoadingTemplate>
);
}
return (