Pass redirect URI from the App component rather than only having access to it in the login view.

src/App.vue

@@ -1,8 +1,9 @@
 <template>
 	<div class="maximize_size">
-		<LoginCard v-if="!is_authed" />
+		<LoginCard v-if="!is_authed" :redirect="auth.redirect" />
 		<MainView
 			v-else
+			:auth_redirect="auth.redirect"
 			:preview_mode="is_preview"
 			:dev_mode="is_dev"
 		/>
@@ -20,7 +21,11 @@ export default {
 		"LoginCard": LoginCard,
 		"MainView": MainView
 	},
-	data() { return {} },
+	data() { return {
+		auth: {
+			redirect: process.env.NODE_ENV === `production` ? `https://oliver.akins.me/top-lists` : `http://localhost:8080`
+		}
+	} },
 	computed: {
 		is_dev() {
 			let params = new URLSearchParams(window.location.search.slice(1));
@@ -53,7 +58,7 @@ export default {
 					return true
 				}
 			} else {
-				let error = (new URLSearchParams(window.location.search)).get(`error`)
+				let error = (new URLSearchParams(window.location.search.slice(1))).get(`error`)
 
 				// Authorization failed, error to the user
 				if (error !== null) {

src/components/ControlBar.vue

@@ -96,6 +96,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		auth_redirect: {
+			type: String,
+			required: true,
+		}
 	},
 	components: {
 		icon: Icon,
@@ -174,7 +178,7 @@ export default {
 			).then((response) => {
 				if (response.error) {
 					window.location.hash = ``;
-					window.location.href = `${this.auth.redirect}?error=${encodeURI(response.error)}`;
+					window.location.href = `${this.auth_redirect}?error=${encodeURI(response.error)}`;
 					return
 				}
 				let data = response.data;
@@ -184,8 +188,9 @@ export default {
 				this.user.image = data.images.length > 0 ? data.images[0].url : ``;
 
 			}).catch((err) => {
+				console/error(err)
 				window.location.hash = ``;
-				window.location.href = `${this.auth.redirect}?error=${encodeURI(err)}`;;
+				window.location.href = `${this.auth_redirect}?error=${encodeURI(err)}`;;
 				return
 			})
 		});

src/components/LoginView.vue

@@ -12,11 +12,16 @@
 <script>
 export default {
 	name: 'LoginView',
+	props: {
+		redirect: {
+			type: String,
+			required: true,
+		}
+	},
 	data() { return {
 		alert: `We will only be able to access your top tracks and artists, nothing else. This is also only done on your browser. Our servers do not see any of the data from your account.`,
 		auth_base: `https://accounts.spotify.com/authorize`,
 		use_state: process.env.NODE_ENV === `production`,
-		redirect: process.env.NODE_ENV === `production` ? `https://oliver.akins.me/top-lists` : `http://localhost:8080`,
 		client_id: `3a1795e9d55445b0aa0c05dd74c866fb`,
 		scopes: [ `user-top-read` ],
 		show_dialog: process.env.NODE_ENV !== `production`,

src/components/MainView.vue

@@ -4,6 +4,7 @@
 			:dev="dev_mode"
 			:preview="preview_mode"
 			:api_url="api_base"
+			:auth_redirect="auth_redirect"
 			:token="get_token()"
 			:data_exists="data.length !== 0"
 			@playlist_export="handle_export"
@@ -37,14 +38,15 @@ import UnknownTypeCard from "./cards/UnknownType.vue";
 export default {
 	name: `MainView`,
 	props: {
-		preview_mode: Boolean,
-		dev_mode: Boolean,
+		auth_redirect: {
+			type: String,
+			required: true,
+		}
 	},
 	components: {
 		Control: ControlCard,
 		Track: TrackCard,
 		Artist: ArtistCard,
-		Unknown: UnknownTypeCard,
 	},
 	data() { return {
 		data: [],