refactor: improvements to the auth implementation in admin dashboard (#3444)
* refactor: abstract axios queries to a separate helper file * chore: delete unnecessary file * chore: remove unnecessary console logs * refactor: updated urls for api and authquery helpers * refactor: updated auth implementation * refactor: use default axios instance * chore: improve code readability * refactor: separate instances for rest and gql calls * refactor: removed async await from functions that do not need them * refactor: removed probable login and probable user from the auth system * refactor: better error handling in login component * chore: deleted unnecessary files and restructured some files * feat: new errors file with typed error message formats * refactor: removed unwanted usage of async await * refactor: optimizing the usage and return of promises in auth flow * refactor: convey boolean return type in a better way * chore: apply suggestions * refactor: handle case when mailcatcher is not active --------- Co-authored-by: nivedin <nivedinp@gmail.com> Co-authored-by: James George <jamesgeorge998001@gmail.com>
This commit is contained in:
Joel Jacob Stephen
committed by
GitHub
GitHub
parent
46caf9b198
commit
7a9f0c8756
@@ -1,12 +1,14 @@
|
||||
import axios from 'axios';
|
||||
import { BehaviorSubject, Subject } from 'rxjs';
|
||||
import {
|
||||
getLocalConfig,
|
||||
removeLocalConfig,
|
||||
setLocalConfig,
|
||||
} from './localpersistence';
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { Ref, ref } from 'vue';
|
||||
import * as O from 'fp-ts/Option';
|
||||
import authQuery from './backend/rest/authQuery';
|
||||
import { COOKIES_NOT_FOUND, UNAUTHORIZED } from './errors';
|
||||
|
||||
/**
|
||||
* A common (and required) set of fields that describe a user.
|
||||
*/
|
||||
@@ -23,22 +25,16 @@ export type HoppUser = {
|
||||
/** URL to the profile picture of the user */
|
||||
photoURL: string | null;
|
||||
|
||||
// Regarding `provider` and `accessToken`:
|
||||
// The current implementation and use case for these 2 fields are super weird due to legacy.
|
||||
// Currrently these fields are only basically populated for Github Auth as we need the access token issued
|
||||
// by it to implement Gist submission. I would really love refactor to make this thing more sane.
|
||||
|
||||
/** Name of the provider authenticating (NOTE: See notes on `platform/auth.ts`) */
|
||||
provider?: string;
|
||||
/** Access Token for the auth of the user against the given `provider`. */
|
||||
accessToken?: string;
|
||||
emailVerified: boolean;
|
||||
|
||||
/** Flag to check for admin status */
|
||||
isAdmin: boolean;
|
||||
};
|
||||
|
||||
export type AuthEvent =
|
||||
| { event: 'probable_login'; user: HoppUser } // We have previous login state, but the app is waiting for authentication
|
||||
| { event: 'login'; user: HoppUser } // We are authenticated
|
||||
| { event: 'logout' } // No authentication and we have no previous state
|
||||
| { event: 'token_refresh' }; // We have previous login state, but the app is waiting for authentication
|
||||
@@ -51,17 +47,11 @@ export type GithubSignInResult =
|
||||
export const authEvents$ = new Subject<
|
||||
AuthEvent | { event: 'token_refresh' }
|
||||
>();
|
||||
const currentUser$ = new BehaviorSubject<HoppUser | null>(null);
|
||||
export const probableUser$ = new BehaviorSubject<HoppUser | null>(null);
|
||||
|
||||
async function logout() {
|
||||
await axios.get(`${import.meta.env.VITE_BACKEND_API_URL}/auth/logout`, {
|
||||
withCredentials: true,
|
||||
});
|
||||
}
|
||||
const currentUser$ = new BehaviorSubject<HoppUser | null>(null);
|
||||
|
||||
const signOut = async (reloadWindow = false) => {
|
||||
await logout();
|
||||
await authQuery.logout();
|
||||
|
||||
// Reload the window if both `access_token` and `refresh_token`is invalid
|
||||
// there by the user is taken to the login page
|
||||
@@ -69,7 +59,6 @@ const signOut = async (reloadWindow = false) => {
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
probableUser$.next(null);
|
||||
currentUser$.next(null);
|
||||
removeLocalConfig('login_state');
|
||||
|
||||
@@ -78,142 +67,66 @@ const signOut = async (reloadWindow = false) => {
|
||||
});
|
||||
};
|
||||
|
||||
async function signInUserWithGithubFB() {
|
||||
window.location.href = `${
|
||||
import.meta.env.VITE_BACKEND_API_URL
|
||||
}/auth/github?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
|
||||
}
|
||||
|
||||
async function signInUserWithGoogleFB() {
|
||||
window.location.href = `${
|
||||
import.meta.env.VITE_BACKEND_API_URL
|
||||
}/auth/google?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
|
||||
}
|
||||
|
||||
async function signInUserWithMicrosoftFB() {
|
||||
window.location.href = `${
|
||||
import.meta.env.VITE_BACKEND_API_URL
|
||||
}/auth/microsoft?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
|
||||
}
|
||||
|
||||
async function getInitialUserDetails() {
|
||||
const res = await axios.post<{
|
||||
data?: {
|
||||
me?: {
|
||||
uid: string;
|
||||
displayName: string;
|
||||
email: string;
|
||||
photoURL: string;
|
||||
isAdmin: boolean;
|
||||
createdOn: string;
|
||||
// emailVerified: boolean
|
||||
};
|
||||
};
|
||||
errors?: Array<{
|
||||
message: string;
|
||||
}>;
|
||||
}>(
|
||||
`${import.meta.env.VITE_BACKEND_GQL_URL}`,
|
||||
{
|
||||
query: `query Me {
|
||||
me {
|
||||
uid
|
||||
displayName
|
||||
email
|
||||
photoURL
|
||||
isAdmin
|
||||
createdOn
|
||||
}
|
||||
}`,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
withCredentials: true,
|
||||
}
|
||||
);
|
||||
|
||||
const getInitialUserDetails = async () => {
|
||||
const res = await authQuery.getUserDetails();
|
||||
return res.data;
|
||||
}
|
||||
|
||||
};
|
||||
const isGettingInitialUser: Ref<null | boolean> = ref(null);
|
||||
|
||||
function setUser(user: HoppUser | null) {
|
||||
const setUser = (user: HoppUser | null) => {
|
||||
currentUser$.next(user);
|
||||
probableUser$.next(user);
|
||||
|
||||
setLocalConfig('login_state', JSON.stringify(user));
|
||||
}
|
||||
};
|
||||
|
||||
async function setInitialUser() {
|
||||
const setInitialUser = async () => {
|
||||
isGettingInitialUser.value = true;
|
||||
const res = await getInitialUserDetails();
|
||||
|
||||
const error = res.errors && res.errors[0];
|
||||
if (res.errors?.[0]) {
|
||||
const [error] = res.errors;
|
||||
|
||||
// no cookies sent. so the user is not logged in
|
||||
if (error && error.message === 'auth/cookies_not_found') {
|
||||
setUser(null);
|
||||
isGettingInitialUser.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// cookies sent, but it is expired, we need to refresh the token
|
||||
if (error && error.message === 'Unauthorized') {
|
||||
const isRefreshSuccess = await refreshToken();
|
||||
|
||||
if (isRefreshSuccess) {
|
||||
setInitialUser();
|
||||
} else {
|
||||
if (error.message === COOKIES_NOT_FOUND) {
|
||||
setUser(null);
|
||||
await signOut(true);
|
||||
isGettingInitialUser.value = false;
|
||||
} else if (error.message === UNAUTHORIZED) {
|
||||
const isRefreshSuccess = await refreshToken();
|
||||
|
||||
if (isRefreshSuccess) {
|
||||
setInitialUser();
|
||||
} else {
|
||||
setUser(null);
|
||||
signOut(true);
|
||||
}
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// no errors, we have a valid user
|
||||
if (res.data && res.data.me) {
|
||||
const hoppBackendUser = res.data.me;
|
||||
} else if (res.data?.me) {
|
||||
const { uid, displayName, email, photoURL, isAdmin } = res.data.me;
|
||||
|
||||
const hoppUser: HoppUser = {
|
||||
uid: hoppBackendUser.uid,
|
||||
displayName: hoppBackendUser.displayName,
|
||||
email: hoppBackendUser.email,
|
||||
photoURL: hoppBackendUser.photoURL,
|
||||
// all our signin methods currently guarantees the email is verified
|
||||
uid,
|
||||
displayName,
|
||||
email,
|
||||
photoURL,
|
||||
emailVerified: true,
|
||||
isAdmin: hoppBackendUser.isAdmin,
|
||||
isAdmin,
|
||||
};
|
||||
|
||||
if (!hoppUser.isAdmin) {
|
||||
const isAdmin = await elevateUser();
|
||||
hoppUser.isAdmin = isAdmin;
|
||||
hoppUser.isAdmin = await elevateUser();
|
||||
}
|
||||
|
||||
setUser(hoppUser);
|
||||
|
||||
isGettingInitialUser.value = false;
|
||||
|
||||
authEvents$.next({
|
||||
event: 'login',
|
||||
user: hoppUser,
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
isGettingInitialUser.value = false;
|
||||
};
|
||||
|
||||
const refreshToken = async () => {
|
||||
try {
|
||||
const res = await axios.get(
|
||||
`${import.meta.env.VITE_BACKEND_API_URL}/auth/refresh`,
|
||||
{
|
||||
withCredentials: true,
|
||||
}
|
||||
);
|
||||
const res = await authQuery.refreshToken();
|
||||
authEvents$.next({
|
||||
event: 'token_refresh',
|
||||
});
|
||||
@@ -223,157 +136,67 @@ const refreshToken = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
async function elevateUser() {
|
||||
const res = await axios.get(
|
||||
`${import.meta.env.VITE_BACKEND_API_URL}/auth/verify/admin`,
|
||||
{
|
||||
withCredentials: true,
|
||||
}
|
||||
);
|
||||
const elevateUser = async () => {
|
||||
const res = await authQuery.elevateUser();
|
||||
return Boolean(res.data?.isAdmin);
|
||||
};
|
||||
|
||||
return !!res.data?.isAdmin;
|
||||
}
|
||||
|
||||
async function sendMagicLink(email: string) {
|
||||
const res = await axios.post(
|
||||
`${import.meta.env.VITE_BACKEND_API_URL}/auth/signin?origin=admin`,
|
||||
{
|
||||
email,
|
||||
},
|
||||
{
|
||||
withCredentials: true,
|
||||
}
|
||||
);
|
||||
|
||||
if (res.data && res.data.deviceIdentifier) {
|
||||
setLocalConfig('deviceIdentifier', res.data.deviceIdentifier);
|
||||
} else {
|
||||
const sendMagicLink = async (email: string) => {
|
||||
const res = await authQuery.sendMagicLink(email);
|
||||
if (!res.data?.deviceIdentifier) {
|
||||
throw new Error('test: does not get device identifier');
|
||||
}
|
||||
|
||||
setLocalConfig('deviceIdentifier', res.data.deviceIdentifier);
|
||||
return res.data;
|
||||
}
|
||||
};
|
||||
|
||||
export const auth = {
|
||||
getCurrentUserStream: () => currentUser$,
|
||||
getAuthEventsStream: () => authEvents$,
|
||||
getProbableUserStream: () => probableUser$,
|
||||
|
||||
getCurrentUser: () => currentUser$.value,
|
||||
getProbableUser: () => probableUser$.value,
|
||||
|
||||
getBackendHeaders() {
|
||||
return {};
|
||||
},
|
||||
getGQLClientOptions() {
|
||||
return {
|
||||
fetchOptions: {
|
||||
credentials: 'include',
|
||||
},
|
||||
};
|
||||
performAuthInit: () => {
|
||||
const currentUser = JSON.parse(getLocalConfig('login_state') ?? 'null');
|
||||
currentUser$.next(currentUser);
|
||||
return setInitialUser();
|
||||
},
|
||||
|
||||
/**
|
||||
* it is not possible for us to know if the current cookie is expired because we cannot access http-only cookies from js
|
||||
* hence just returning if the currentUser$ has a value associated with it
|
||||
*/
|
||||
willBackendHaveAuthError() {
|
||||
return !currentUser$.value;
|
||||
},
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
onBackendGQLClientShouldReconnect(func: () => void) {
|
||||
authEvents$.subscribe((event) => {
|
||||
if (
|
||||
event.event == 'login' ||
|
||||
event.event == 'logout' ||
|
||||
event.event == 'token_refresh'
|
||||
) {
|
||||
func();
|
||||
}
|
||||
});
|
||||
},
|
||||
signInWithEmail: (email: string) => sendMagicLink(email),
|
||||
|
||||
/**
|
||||
* we cannot access our auth cookies from javascript, so leaving this as null
|
||||
*/
|
||||
getDevOptsBackendIDToken() {
|
||||
return null;
|
||||
},
|
||||
async performAuthInit() {
|
||||
const probableUser = JSON.parse(getLocalConfig('login_state') ?? 'null');
|
||||
probableUser$.next(probableUser);
|
||||
await setInitialUser();
|
||||
},
|
||||
|
||||
waitProbableLoginToConfirm() {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (this.getCurrentUser()) {
|
||||
resolve();
|
||||
}
|
||||
|
||||
if (!probableUser$.value) reject(new Error('no_probable_user'));
|
||||
|
||||
const unwatch = watch(isGettingInitialUser, (val) => {
|
||||
if (val === true || val === false) {
|
||||
resolve();
|
||||
unwatch();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
async signInWithEmail(email: string) {
|
||||
await sendMagicLink(email);
|
||||
},
|
||||
|
||||
isSignInWithEmailLink(url: string) {
|
||||
isSignInWithEmailLink: (url: string) => {
|
||||
const urlObject = new URL(url);
|
||||
const searchParams = new URLSearchParams(urlObject.search);
|
||||
|
||||
return !!searchParams.get('token');
|
||||
return Boolean(searchParams.get('token'));
|
||||
},
|
||||
|
||||
async verifyEmailAddress() {
|
||||
return;
|
||||
signInUserWithGoogle: () => {
|
||||
window.location.href = `${
|
||||
import.meta.env.VITE_BACKEND_API_URL
|
||||
}/auth/google?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
|
||||
},
|
||||
async signInUserWithGoogle() {
|
||||
await signInUserWithGoogleFB();
|
||||
|
||||
signInUserWithGithub: () => {
|
||||
window.location.href = `${
|
||||
import.meta.env.VITE_BACKEND_API_URL
|
||||
}/auth/github?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
|
||||
},
|
||||
async signInUserWithGithub() {
|
||||
await signInUserWithGithubFB();
|
||||
return undefined;
|
||||
|
||||
signInUserWithMicrosoft: () => {
|
||||
window.location.href = `${
|
||||
import.meta.env.VITE_BACKEND_API_URL
|
||||
}/auth/microsoft?redirect_uri=${import.meta.env.VITE_ADMIN_URL}`;
|
||||
},
|
||||
async signInUserWithMicrosoft() {
|
||||
await signInUserWithMicrosoftFB();
|
||||
},
|
||||
async signInWithEmailLink(email: string, url: string) {
|
||||
|
||||
signInWithEmailLink: (url: string) => {
|
||||
const urlObject = new URL(url);
|
||||
const searchParams = new URLSearchParams(urlObject.search);
|
||||
|
||||
const token = searchParams.get('token');
|
||||
const deviceIdentifier = getLocalConfig('deviceIdentifier');
|
||||
|
||||
await axios.post(
|
||||
`${import.meta.env.VITE_BACKEND_API_URL}/auth/verify`,
|
||||
{
|
||||
token: token,
|
||||
deviceIdentifier,
|
||||
},
|
||||
{
|
||||
withCredentials: true,
|
||||
}
|
||||
);
|
||||
},
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
async setEmailAddress(_email: string) {
|
||||
return;
|
||||
},
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
async setDisplayName(name: string) {
|
||||
return;
|
||||
return authQuery.signInWithEmailLink(token, deviceIdentifier);
|
||||
},
|
||||
|
||||
async performAuthRefresh() {
|
||||
performAuthRefresh: async () => {
|
||||
const isRefreshSuccess = await refreshToken();
|
||||
|
||||
if (isRefreshSuccess) {
|
||||
@@ -386,12 +209,10 @@ export const auth = {
|
||||
}
|
||||
},
|
||||
|
||||
async signOutUser(reloadWindow = false) {
|
||||
await signOut(reloadWindow);
|
||||
},
|
||||
signOutUser: (reloadWindow = false) => signOut(reloadWindow),
|
||||
|
||||
async processMagicLink() {
|
||||
if (this.isSignInWithEmailLink(window.location.href)) {
|
||||
processMagicLink: async () => {
|
||||
if (auth.isSignInWithEmailLink(window.location.href)) {
|
||||
const deviceIdentifier = getLocalConfig('deviceIdentifier');
|
||||
|
||||
if (!deviceIdentifier) {
|
||||
@@ -400,7 +221,7 @@ export const auth = {
|
||||
);
|
||||
}
|
||||
|
||||
await this.signInWithEmailLink(deviceIdentifier, window.location.href);
|
||||
await auth.signInWithEmailLink(window.location.href);
|
||||
|
||||
removeLocalConfig('deviceIdentifier');
|
||||
window.location.href = import.meta.env.VITE_ADMIN_URL;
|
||||
|
||||
Reference in New Issue
Block a user