feat: add redirect path to go back to the page you were on when you sign in

apps/frontend/src/composables/auth.js

@@ -104,13 +104,28 @@ export const initAuth = async (oldToken = null) => {
 	return auth
 }
 
+export const getSignInRedirectPath = (route) => {
+	const fullPath = route.fullPath
+	if (fullPath === '/auth' || fullPath.startsWith('/auth/')) {
+		return '/dashboard'
+	}
+	return fullPath
+}
+
+export const getSignInRouteObj = (route, redirectOverride) => ({
+	path: '/auth/sign-in',
+	query: {
+		redirect: redirectOverride ?? getSignInRedirectPath(route),
+	},
+})
+
 export const getAuthUrl = (provider, redirect = '/dashboard') => {
 	const config = useRuntimeConfig()
 	const route = useNativeRoute()
 
 	const fullURL = route.query.launcher
 		? getLauncherRedirectUrl(route)
-		: `${config.public.siteUrl}/auth/sign-in?redirect=${redirect}`
+		: `${config.public.siteUrl}/auth/sign-in?redirect=${encodeURIComponent(redirect)}`
 
 	return `${config.public.apiBaseUrl}auth/init?provider=${provider}&url=${encodeURIComponent(fullURL)}`
 }

apps/frontend/src/layouts/default.vue

@@ -501,7 +501,7 @@
 				</OverflowMenu>
 				<template v-else>
 					<ButtonStyled color="brand">
-						<nuxt-link to="/auth/sign-in">
+						<nuxt-link :to="signInRouteObj">
 							<LogInIcon aria-hidden="true" />
 							{{ formatMessage(commonMessages.signInButton) }}
 						</nuxt-link>
@@ -556,7 +556,7 @@
 							<div>{{ formatMessage(commonMessages.visitYourProfile) }}</div>
 						</div>
 					</NuxtLink>
-					<nuxt-link v-else class="iconified-button brand-button" to="/auth/sign-in">
+					<nuxt-link v-else class="iconified-button brand-button" :to="signInRouteObj">
 						<LogInIcon aria-hidden="true" /> {{ formatMessage(commonMessages.signInButton) }}
 					</nuxt-link>
 				</div>
@@ -761,6 +761,7 @@ import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateMo
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
 import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
+import { getSignInRouteObj } from '~/composables/auth.js'
 import { errors as generatedStateErrors } from '~/generated/state.json'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 
@@ -779,6 +780,7 @@ const flags = useFeatureFlags()
 const config = useRuntimeConfig()
 const route = useNativeRoute()
 const router = useNativeRouter()
+const signInRouteObj = computed(() => getSignInRouteObj(route))
 const link = config.public.siteUrl + route.path.replace(/\/+$/, '')
 const client = injectModrinthClient()
 

apps/frontend/src/pages/[type]/[id].vue

@@ -647,15 +647,15 @@
 									<nuxt-link
 										v-else
 										v-tooltip="formatMessage(commonMessages.followButton)"
-										to="/auth/sign-in"
+										:to="signInRouteObj"
 										:aria-label="formatMessage(commonMessages.followButton)"
 									>
 										<HeartIcon aria-hidden="true" />
 									</nuxt-link>
 									<template #fallback>
 										<nuxt-link
 											v-tooltip="formatMessage(commonMessages.followButton)"
-											to="/auth/sign-in"
+											:to="signInRouteObj"
 											:aria-label="formatMessage(commonMessages.followButton)"
 										>
 											<HeartIcon aria-hidden="true" />
@@ -715,7 +715,7 @@
 										</button>
 									</template>
 								</PopoutMenu>
-								<nuxt-link v-else v-tooltip="'Save'" to="/auth/sign-in" aria-label="Save">
+								<nuxt-link v-else v-tooltip="'Save'" :to="signInRouteObj" aria-label="Save">
 									<BookmarkIcon aria-hidden="true" />
 								</nuxt-link>
 							</ButtonStyled>
@@ -768,7 +768,11 @@
 										{
 											id: 'report',
 											action: () =>
-												auth.user ? reportProject(project.id) : navigateTo('/auth/sign-in'),
+												auth.user
+													? reportProject(project.id)
+													: navigateTo(
+															getSignInRouteObj(route, getReportPath('project', project.id)),
+														),
 											color: 'red',
 											hoverOnly: true,
 											shown: !isMember,
@@ -1117,19 +1121,21 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import MessageBanner from '~/components/ui/MessageBanner.vue'
 import ModerationChecklist from '~/components/ui/moderation/checklist/ModerationChecklist.vue'
 import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
+import { getSignInRouteObj } from '~/composables/auth.js'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
 import { STALE_TIME, STALE_TIME_LONG } from '~/composables/queries/project'
 import { versionQueryOptions } from '~/composables/queries/version'
 import { userCollectProject, userFollowProject } from '~/composables/user.js'
 import { useModerationStore } from '~/store/moderation.ts'
-import { reportProject } from '~/utils/report-helpers.ts'
+import { getReportPath, reportProject } from '~/utils/report-helpers.ts'
 
 definePageMeta({
 	key: (route) => `${route.params.id}`,
 })
 
 const data = useNuxtApp()
 const route = useRoute()
+const signInRouteObj = computed(() => getSignInRouteObj(route))
 const config = useRuntimeConfig()
 const moderationStore = useModerationStore()
 const notifications = injectNotificationManager()

apps/frontend/src/pages/[type]/[id]/settings/versions.vue

@@ -110,7 +110,8 @@
 								id: 'report',
 								color: 'red',
 								hoverFilled: true,
-								action: () => (auth.user ? reportVersion(version.id) : navigateTo('/auth/sign-in')),
+								action: () =>
+									auth.user ? reportVersion(version.id) : navigateTo(getSignInRouteObj(route)),
 								shown: !currentMember,
 							},
 							{ divider: true, shown: !!currentMember || flags.developerMode },
@@ -307,8 +308,11 @@ import {
 import { useTemplateRef } from 'vue'
 
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
+import { getSignInRouteObj } from '~/composables/auth.js'
 import { reportVersion } from '~/utils/report-helpers.ts'
 
+const route = useRoute()
+
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 const {

apps/frontend/src/pages/[type]/[id]/version/[version].vue

@@ -147,7 +147,7 @@
 					</a>
 				</ButtonStyled>
 				<ButtonStyled v-if="!auth.user">
-					<nuxt-link to="/auth/sign-in">
+					<nuxt-link :to="signInRouteObj">
 						<ReportIcon aria-hidden="true" />
 						Report
 					</nuxt-link>
@@ -443,6 +443,7 @@ import { formatBytes, renderHighlightedString } from '@modrinth/utils'
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
 import Modal from '~/components/ui/Modal.vue'
+import { getSignInRouteObj } from '~/composables/auth.js'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { inferVersionInfo } from '~/helpers/infer'
 import { createDataPackVersion } from '~/helpers/package.js'
@@ -454,6 +455,7 @@ const emit = defineEmits<{
 // Composables
 const data = useNuxtApp()
 const route = useNativeRoute()
+const signInRouteObj = computed(() => getSignInRouteObj(route))
 const router = useRouter()
 const auth = await useAuth()
 const tags = useGeneratedState()

apps/frontend/src/pages/[type]/[id]/versions.vue

@@ -132,7 +132,7 @@
 									color: 'red',
 									hoverFilled: true,
 									action: () =>
-										auth.user ? reportVersion(version.id) : navigateTo('/auth/sign-in'),
+										auth.user ? reportVersion(version.id) : navigateTo(getSignInRouteObj(route)),
 									shown: !currentMember,
 								},
 								{ divider: true, shown: currentMember || flags.developerMode },
@@ -269,8 +269,11 @@ import {
 import { onMounted, useTemplateRef } from 'vue'
 
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
+import { getSignInRouteObj } from '~/composables/auth.js'
 import { reportVersion } from '~/utils/report-helpers.ts'
 
+const route = useRoute()
+
 const tags = useGeneratedState()
 const flags = useFeatureFlags()
 const auth = await useAuth()

apps/frontend/src/pages/user/[id].vue

@@ -199,7 +199,8 @@
 									{ divider: true, shown: auth.user && auth.user.id === user.id },
 									{
 										id: 'report',
-										action: () => (auth.user ? reportUser(user.id) : navigateTo('/auth/sign-in')),
+										action: () =>
+											auth.user ? reportUser(user.id) : navigateTo(getSignInRouteObj(route)),
 										color: 'red',
 										hoverOnly: true,
 										shown: auth.user?.id !== user.id,
@@ -522,6 +523,7 @@ import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
+import { getSignInRouteObj } from '~/composables/auth.js'
 import { reportUser } from '~/utils/report-helpers.ts'
 
 const data = useNuxtApp()

apps/frontend/src/providers/setup/auth.ts

@@ -2,8 +2,11 @@ import type { Labrinth } from '@modrinth/api-client'
 import { type AuthProvider, provideAuth } from '@modrinth/ui'
 import { ref, watchEffect } from 'vue'
 
+import { getSignInRedirectPath } from '~/composables/auth.js'
+
 export function setupAuthProvider(auth: Awaited<ReturnType<typeof useAuth>>) {
 	const router = useRouter()
+	const route = useRoute()
 	const sessionToken = ref<string | null>(null)
 	const user = ref<Labrinth.Users.v2.User | null>(null)
 
@@ -14,7 +17,7 @@ export function setupAuthProvider(auth: Awaited<ReturnType<typeof useAuth>>) {
 			await router.push({
 				path: '/auth/sign-in',
 				query: {
-					redirect: redirectPath,
+					redirect: redirectPath || getSignInRedirectPath(route),
 				},
 			})
 		},

apps/frontend/src/utils/report-helpers.ts

@@ -1,11 +1,12 @@
-const startReport = (type: string, id: string) => {
+export const getReportPath = (type: string, id: string) => {
 	const prefill = new URLSearchParams()
-
-	// type
 	prefill.set('item', type)
 	prefill.set('itemID', id)
+	return '/report?' + prefill.toString()
+}
 
-	navigateTo('/report?' + prefill.toString())
+const startReport = (type: string, id: string) => {
+	navigateTo(getReportPath(type, id))
 }
 
 export const reportProject = (id: string) => {