SolidJS•2y ago•

4 replies

Unexpected SolidStart Behavior On Vercel. Can You Help?

I have an

AuthContextProvider

AuthContextProvider

that works on

npm run dev

npm run dev

but doesn't work on Vercel. I'm lost. Any help would be appreciated.

Here's the flow:

1. I'm using a Solid store (

createStore

createStore

) to store auth state.
2. When the auth state changes, I update the Solid store.
3. If a user is authenticated AND they are on a page that has

/auth

/auth

in the pathname, I redirect the user to the app dashboard. This prevents authenticated users from accessing sign-in or sign-up pages.

Everything works as expected when running

npm run dev

npm run dev

. When a user signs in on the

/auth/sign-in

/auth/sign-in

page:

1. An auth state change occurs.
2. I set

isAuthenticated

isAuthenticated

true

true

3. Then, I redirect the user to the app dashboard.

After deploying to Vercel, the redirect stopped working. After signing in, the app stays on the

/auth/sign-in

/auth/sign-in

page.

I added a

console.log

console.log

to check both conditions, and both are

true

true

, but the redirect doesn't work.

If I refresh my browser, the redirect occurs.

Why is this happening? Does it have something to do with caching at Vercel?

I'm using the latest version of SolidStart in SSR mode.

Here's the code.

// Set up a store to track auth state
const defaultAuthState: SupabaseAuthData = {
  isAuthenticated: false,
  isLoading: true,
  supabaseSession: null,
  isAdmin: false,
};

const [authStore, setAuthStore] = createStore(defaultAuthState);

const { data: { subscription }, } = supabase.auth.onAuthStateChange(async (_event, session) => {
  // Check to see if there is a session.
  if (!!session) {
    // A session exists. Update the auth store
    setAuthStore({ isAuthenticated: true, supabaseSession: session, isAdmin: adminUser });
        
    console.log(authStore.isAuthenticated); // result true
    console.log(location.pathname.includes("/auth"); // result true
        
    // NOT WORKING
    if (location.pathname.includes("/auth") && authStore.isAuthenticated) {
      navigate(`/${appRoute}`, { replace: true });
    }
  } 
});

// Set up a store to track auth state
const defaultAuthState: SupabaseAuthData = {
  isAuthenticated: false,
  isLoading: true,
  supabaseSession: null,
  isAdmin: false,
};

const [authStore, setAuthStore] = createStore(defaultAuthState);

const { data: { subscription }, } = supabase.auth.onAuthStateChange(async (_event, session) => {
  // Check to see if there is a session.
  if (!!session) {
    // A session exists. Update the auth store
    setAuthStore({ isAuthenticated: true, supabaseSession: session, isAdmin: adminUser });
        
    console.log(authStore.isAuthenticated); // result true
    console.log(location.pathname.includes("/auth"); // result true
        
    // NOT WORKING
    if (location.pathname.includes("/auth") && authStore.isAuthenticated) {
      navigate(`/${appRoute}`, { replace: true });
    }
  } 
});

SolidJS•2y ago•

4 replies

ChrisThornham

Unexpected SolidStart Behavior On Vercel. Can You Help?

I have an

AuthContextProvider

AuthContextProvider

that works on

npm run dev

npm run dev

but doesn't work on Vercel. I'm lost. Any help would be appreciated.

Here's the flow:

1. I'm using a Solid store (

createStore

createStore

) to store auth state.
2. When the auth state changes, I update the Solid store.
3. If a user is authenticated AND they are on a page that has

/auth

/auth

in the pathname, I redirect the user to the app dashboard. This prevents authenticated users from accessing sign-in or sign-up pages.

Everything works as expected when running

npm run dev

npm run dev

. When a user signs in on the

/auth/sign-in

/auth/sign-in

page:

1. An auth state change occurs.
2. I set

isAuthenticated

isAuthenticated

true

true

3. Then, I redirect the user to the app dashboard.

After deploying to Vercel, the redirect stopped working. After signing in, the app stays on the

/auth/sign-in

/auth/sign-in

page.

I added a

console.log

console.log

to check both conditions, and both are

true

true

// Set up a store to track auth state
const defaultAuthState: SupabaseAuthData = {
  isAuthenticated: false,
  isLoading: true,
  supabaseSession: null,
  isAdmin: false,
};

const [authStore, setAuthStore] = createStore(defaultAuthState);

const { data: { subscription }, } = supabase.auth.onAuthStateChange(async (_event, session) => {
  // Check to see if there is a session.
  if (!!session) {
    // A session exists. Update the auth store
    setAuthStore({ isAuthenticated: true, supabaseSession: session, isAdmin: adminUser });
        
    console.log(authStore.isAuthenticated); // result true
    console.log(location.pathname.includes("/auth"); // result true
        
    // NOT WORKING
    if (location.pathname.includes("/auth") && authStore.isAuthenticated) {
      navigate(`/${appRoute}`, { replace: true });
    }
  } 
});

// Set up a store to track auth state
const defaultAuthState: SupabaseAuthData = {
  isAuthenticated: false,
  isLoading: true,
  supabaseSession: null,
  isAdmin: false,
};

const [authStore, setAuthStore] = createStore(defaultAuthState);

const { data: { subscription }, } = supabase.auth.onAuthStateChange(async (_event, session) => {
  // Check to see if there is a session.
  if (!!session) {
    // A session exists. Update the auth store
    setAuthStore({ isAuthenticated: true, supabaseSession: session, isAdmin: adminUser });
        
    console.log(authStore.isAuthenticated); // result true
    console.log(location.pathname.includes("/auth"); // result true
        
    // NOT WORKING
    if (location.pathname.includes("/auth") && authStore.isAuthenticated) {
      navigate(`/${appRoute}`, { replace: true });
    }
  } 
});

Unexpected SolidStart Behavior On Vercel. Can You Help?

Unexpected SolidStart Behavior On Vercel. Can You Help?

Similar Threads

Similar Threads

Similar Threads