I'm currently working on a silly web app with my friends for some laughs. We're using Firebase hosting and Discord OAuth2. The issue arises when attempting to access the "/login" page either by entering it in the URL or clicking "authorize" on the Discord link. To see the problem firsthand, you can visit: (or check out the images below). Click the green button and then the blue one. This will lead you to a 404 default page. So, the "/login" page is only accessible if you click the initial green button and cannot be reached from any other route. I'm baffled as to why this is happening. This glitch doesn't occur when running the app locally (using npm run dev) - everything works as intended.
This is the landing page where you need to press the green button https://i.stack.imgur.com/kVBjd.jpg
Here's the "bugged" page, which is only accessible through the previous page https://i.stack.imgur.com/2l2Fu.png
If you attempt to directly access the page via the URL , you'll encounter a 404 error somehow.
Below are snippets of the code (let me know if more is needed):
Router:
import Vue from 'vue'
import Router from 'vue-router'
import homepage from '../views/HomePageView.vue'
import discordlogin from '../views/DiscordLoginView.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'homepage',
component: homepage
},
{
name: "discordlogin",
path: "/login",
component: discordlogin
}
]
})
Discord login page (the second page, which is currently unreachable):
<template>
<div>
<section class="vh-100 gradient-custom">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card bg-dark text-white" style="border-radius: 1rem;">
<div class="card-body p-5 text-center">
<div class="mb-md-5 mt-md-4 pb-5">
<h2 class="fw-bold mb-2 text-uppercase">Register with Discord</h2>
<p class="text-white-50 mb-5">You will be redirected to Discord</p>
<button @click="discordLink()" class="btn btn-outline-light btn-lg px-5" type="submit">Register <img
src="../assets/images/discord-ico.png"></button>
<div class="d-flex justify-content-center text-center mt-4 pt-1">
<a href="#!" class="text-white"><i class="fab fa-facebook-f fa-lg"></i></a>
<a href="#!" class="text-white"><i class="fab fa-twitter fa-lg mx-4 px-2"></i></a>
<a href="#!" class="text-white"><i class="fab fa-google fa-lg"></i></a>
</div>
</div>
<div>
<p class="mb-0">Having troubles? <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
class="text-white-50 fw-bold">I don't care! LMAO</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
...
To those who are lending a helping hand, thank you.
EDIT: While I removed mode: 'history' from the router configuration, the issue seems to have been resolved, although the behavior remains peculiar.