Update parent component | Remix | Page 1

little halo Oct 1, 2022, 9:16 PM

#

Right now I have my navigation stored in a component which the root.tsx file uses, when the user has signed in successfully, I want to update the navigation to include the user's name.

My root.tsx file:

function Layout({ children }) {
    return (
        <div className={"wrapper flex-row flex-fill 100vh"}>
            <div className={"d-flex flex-column"}>
                <Dashboard/>
            </div>
            <div className={"d-flex flex-column flex-fill"}>
                {children}
            </div>
        </div>
    );
}

main spire Oct 1, 2022, 9:23 PM

#

return the currently logged-in user from the loader of root.tsx

little halo Oct 1, 2022, 9:23 PM

#

Like this?

#

export const loader: LoaderFunction = async ({ request }) => {
    const auth_token = await auth.isAuthenticated(request, {
        failureRedirect: "/login",
    });

    console.log("The index is loading...");
    return null;
}

#

My index route already has the same loader

main spire Oct 1, 2022, 9:25 PM

#

isAuthenticated should return the user object (including their name). then

return json({ user })

little halo Oct 1, 2022, 9:25 PM

#

Gotcha, so should I remove this from index and put in root

#

I get too many redirects when I put that loader in root

main spire Oct 1, 2022, 9:27 PM

#

yeah and in your root component you do
const { user } = useLoaderData<typeof loader>()

#

huh it should only redirect on failure, right?

little halo Oct 1, 2022, 9:28 PM

#

It keeps redirecting to login over and over

main spire Oct 1, 2022, 9:28 PM

#

in that case your authentication logic does not seem to work for some reason

little halo Oct 1, 2022, 9:29 PM

#

it works in index but not root

#

do you have any idea what could cause that behavior? is root doing something different than index?

main spire Oct 1, 2022, 9:34 PM

#

there shouldn't be any difference between loaders of different routes. auth.isAuthenticated should work the same no matter where

#

sorry, not sure what's causing this in your case 🤷

little halo Oct 1, 2022, 9:35 PM

#

can you point me in a direction for debug

#

@main spire After getting rid of the failureRedirect it doesn't error infinitely redirect anymore

main spire Oct 1, 2022, 9:48 PM

#

that's good news. however, it shouldn't do that to begin with 🤔

little halo Oct 1, 2022, 9:49 PM

#

it's not failing as it's giving me the information I need

#

What actually triggers failureRedirect?

main spire Oct 1, 2022, 9:53 PM

#

https://github.com/sergiodxa/remix-auth/blob/main/src/authenticator.ts#L199
this is the code. it executes the redirect if it wasn't able to find the user on the session with the given sessionKey

GitHub

remix-auth/authenticator.ts at main · sergiodxa/remix-auth

Simple Authentication for Remix. Contribute to sergiodxa/remix-auth development by creating an account on GitHub.

little halo Oct 1, 2022, 9:53 PM

#

is it possible it's doing that because session isn't loaded yet?

main spire Oct 1, 2022, 9:58 PM

#

seems unlikely. what are you using? cookieSession?

little halo Oct 1, 2022, 9:59 PM

#

Believe so

#

sessionStorage is in my auth.server.tsx

#

I don't have a seperate file called session.server

#

(if that has any effect)

main spire Oct 1, 2022, 10:03 PM

#

you can check in chrome if the session cookie is set correctly. you can also go into node_modules and console.log the session in the above code to see if it's found

little halo Oct 1, 2022, 10:06 PM

#

this messes up whenever an error occurs

#

function Layout({ children }) {
    const user_data = useLoaderData();

    return (
        <div className={"wrapper flex-row flex-fill 100vh"}>
            <div className={"d-flex flex-column"}>
                <Dashboard name={user_data.FirstName}/>
            </div>
            <div className={"d-flex flex-column flex-fill"}>
                {children}
            </div>
        </div>
    );
}

#

fixed that part

#

still having the failureRedirect issue

#

@main spire could it be because login route is derived from root?

#

So in order to access login it has to go through root which causes it to keep redirecting?

#

@main spire there's no cookie

little halo Oct 1, 2022, 10:42 PM

#

Anyone have an idea?

#

I think it has something to do with the loader checking for auth in root.tsx, as even the login page will still try to check for auth

#Update parent component