T
TanStack•7mo ago
vicious-gold

Micrsoft Authentication library not working properly for hashed route with tanstack router

I have an implementation of the tanstack router with _auth.tsx file and _authenticated.tsx file for the protected route and their code is same with condition change as shown: 
import { createFileRoute, redirect } from "@tanstack/react-router";
export const Route = createFileRoute("/_authenticated")({
  beforeLoad: async ({ context, location }) => {
    if (!context.auth.getActiveAccount()) { // Here this is the condition change for the auth file.
      throw redirect({
        to: "/login",
        search: {
          // Use the current location to power a redirect after login
          redirect: location.href
        }
      });
    }
  }
});
import { createFileRoute, redirect } from "@tanstack/react-router";
export const Route = createFileRoute("/_authenticated")({
  beforeLoad: async ({ context, location }) => {
    if (!context.auth.getActiveAccount()) { // Here this is the condition change for the auth file.
      throw redirect({
        to: "/login",
        search: {
          // Use the current location to power a redirect after login
          redirect: location.href
        }
      });
    }
  }
});
so while doing a popup login method using the msal library the login works fine for most of the cases but sometimes it breaks giving hash_empty_error and I looked at it and it mentiones the root cause of this might be the removal of hash form the URL. I might be wrong posting this issue in the tanstack router forum but i am stuck at this moment and couldn't find a solution for this. This is my login.lazy.tsx file. 
import { Button } from "@/components/ui/button";
import { UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
import { createLazyFileRoute } from "@tanstack/react-router";
export const Route = createLazyFileRoute("/_auth/login")({
  component: RouteComponent
});
function RouteComponent() {
  const { instance } = useMsal();
  async function handleLogin() {
    try {
      await instance.loginPopup();
      //navigating them to homepage:
      window.location.assign("/");
    } catch (err) {
      console.error("Login error", err);
    }
  }
  return (
    <UnauthenticatedTemplate>
      <Button onClick={handleLogin}>Login</Button>
    </UnauthenticatedTemplate>
  );
}
import { Button } from "@/components/ui/button";
import { UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
import { createLazyFileRoute } from "@tanstack/react-router";
export const Route = createLazyFileRoute("/_auth/login")({
  component: RouteComponent
});
function RouteComponent() {
  const { instance } = useMsal();
  async function handleLogin() {
    try {
      await instance.loginPopup();
      //navigating them to homepage:
      window.location.assign("/");
    } catch (err) {
      console.error("Login error", err);
    }
  }
  return (
    <UnauthenticatedTemplate>
      <Button onClick={handleLogin}>Login</Button>
    </UnauthenticatedTemplate>
  );
}
The URL shows /login?redirect=%2F. Not sure if this redirect param is replacing the router. Also, how to remove the ?redirect=%2F from the URL? I don't want that.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?