11

I am using Remix-run and i want to redirect to my login page from a auth utility function. but it doesnt work. here is a similar function to my authentication utility method

import { redirect } from 'remix';

 async function authenticate(request){
  try{
    const user = await rpc.getUser(request);
    return user
  } catch(e){
   console.log(e) // logs error when rpc fails
   if(e.response.status === 401){
    return redirect('/login')
   }
   return redirect('/500')
  }
 }

//component.jsx

import {useLoaderData } from 'remix';

export async function loader({ request }) {
  const user = await auth.authenticate(request);
  return { user };
}

export default function Admin(){
 const { user } = useLoaderData();
  return <h1>{user.name}</h1>
}

if the auth rpc fails i get the error in the logs. but redirect never happens. If i move redirect part to my loader function it works as expected. its not only working inside the utility function

André Werlang
  • 5,839
  • 1
  • 35
  • 49
hannad rehman
  • 4,133
  • 3
  • 33
  • 55

1 Answers1

15

After digging in the docs and remix jokes app demo. i found that you need to throw a redirect from any other function other than loaders/actions to do redirects. you can also throw Http response if wanted.

import { redirect } from 'remix';

 async function authenticate(request){
  try{
    const user = await rpc.getUser(request);
    return user
  } catch(e){
   if(e.response.status === 401){
    throw redirect('/login')
   }
   throw redirect('/500')
  }
 }
hannad rehman
  • 4,133
  • 3
  • 33
  • 55