Best way to implement authentication (Oauth2)

[crixx]

Hi there, I'm trying to implement user authentication based on Oauth2 Authorization Grant.

Currently, I'm registering some global navigation guards to route unauthenticated users to a login page. There, I perform the login and then route them back to the page they wanted to see before the login process started. Those guards I register in client.ts in the enhance hook.

While everything works smoothly in development mode, I get a "hydration mismatch" and page rendering breaks in production builds. This happens a) when I directly load a page that protected (e.g. /protected/page.html) and then get rerouted to /login.html and b) after users successfully authenticate and come back to my site and I redirect them to the original destination.

I think it is pretty much this exact bug in vuepress v1: vuejs/vuepress#1382

How woud you go about implementing Oauth2 Authorization Grant in vuepress-next?

Any ideas welcome!

[Mister-Hope]

You need to show your actual code.

If you use beforeRoute guard to perform redirect, then ssg will render any protected pages with login because your code told the renderer to render login page.

If you are logined and you no loger perform redirect when redirectly enter an protected page, then you are hygrating "the protected page content" on "the login page". So you will get a mismatch expected.

Is my description clear enough to you?

To perform such a feature, you may need to "mark the whole page" as client only and render blank content at ssr. Also place the redirect in onMounted lifecycle, check if the users are logined at that time, if not redirect to login page, if so render the content. That should lead to an expected result.

Also another workaround is to ensure all pages are redirected to login page in all times, and render protected page contents dynamicly after users are logined. But this workaround is not how vuepress works.

[crixx]

Hi @Mister-Hope thanks for your advice!

Initial Code in client.ts:

export default defineClientConfig({
  async enhance({ app, router, siteData }) {
    router.beforeEach(async (to, from) => {
        if (to.query && to.query.code) {
          const { code, state } = to.query
          const response = await getToken(code, state)
  
          if (response.ok) {
            const session = await response.json()
            await syncUserData(session.access_token, store)
            return "/"; // <-- here is where the hydration error occured 
          } else {
            console.error("failed to exchange token")
            return;
          }
        } else if(!store.authenticated && to.path !== '/login.html' && to.path !== '/'){
          console.log("redirecting to login")
          return '/login.html';  // <-- and here too
        }
      })

Now pushed the code into the setup i.e. onMounted hook and call the route and router functions as below. Seems to work as expected - just postponing the transition till all page has been rendered does the trick.

As @Mister-Hope pointed out, it could also make sense to declare all content to be ClientOnly to prevent users to just disable JS and crawl the site. In my specific case, transferring the content and only then have a redirect is "good enough".

  setup() {
    onMounted(async () => {
      const route = useRoute()
      const router = useRouter()
      // ...code that was previously in beforeRoute
    }
  }

Thanks @Mister-Hope !

[Mister-Hope]

You can just import ClientOnly component from @vuepress/client and place opening and closing tag at the start/end of the markdown content. That's a very simple way.

A more complicated way is to use a special layout for these pages where <Content /> is wrapped by ClientOnly in this layout.

I am not understanding the second code block of what you are doing, but if you are sure that it works, just have fun :)