How to use Authentication based routing

[Shivansh12t]

I want the sign up / login page to appear as the user access the website.
I am new to this, hence i am not able to exactly figure out how to do it.

[satnaing]

You've asked this question a while ago, so I believe you'd already have your answer as well.
Authentication & authorization are very huge topic. There are so many area and concepts to cover.

Shadcn-admin is just a Single Page Application (SPA), which means you don't have to worry about server-side rendering and client-side rendering complexities.
In this kind of project (SPA admin panel), usually there's a dedicated backend where the frontend communicates with by making requests and receiving responses.

Here's the basic flow:

1. User tries to login
2. Frontend makes a request to the backend with user's credentials (eg: email and password)
3. Backend responds with token if credentials are correct
4. Frontend stores the token in the state using ContextAPI or client-side state management solutions like Zustand. Either way, you'll need to persist that state inside cookie (recommended) or local storage (not recommend)
5. Whenever the user try to access a protected route, you'll have to check if the user has proper access, valid token etc.

In shadcn-admin, you can check the auth inside src/routes/_authenticated/route.tsx like this

export const Route = createFileRoute('/_authenticated')({
  beforeLoad: ({ location }) => {
    const { accessToken, setUser } = useAuthStore.getState().auth // get the token and `setUser` method from Zustand state
    const { isValid, token } = checkAuthToken(accessToken) // check if the token is valid

    // if no token found or token is not valid, redirect back to `/sign-in` page
    if (!isValid || !token) {
      setUser(null)
      throw redirect({
        to: "/sign-in",
        search: { redirect: `${location.href}` },
        mask: { to: "/sign-in" },
      })
    }

    setUser(token)
  },
  component: RouteComponent,
})

This example is not perfect yet. Usually, you might have to deal with refresh token as well. I won't be showing an example code for that. However, here's the basic flow:

1. current accessToken expires
2. generate new accessToken with the refreshToken
3. use that accessToken for protected routes (above example flow)
4. if no accessToken is generated or refreshToken expires, log the user out and redirect to /sign-in page