SolidJS•6mo ago

How do I redirect properly?

"use server";

import {
    GoogleAuthProvider,
    signInAnonymously,
    signInWithPopup,
} from "firebase/auth";
import { auth } from "./client-firebase";
import { createUserSession } from "./session";
import { redirect } from "@solidjs/router";

const googleProvider = new GoogleAuthProvider();

export const signInWithGoogle = async () => {
    try {
        const userCredential = await signInWithPopup(auth, googleProvider);
        console.log("Signed in with Google:", userCredential.user);

        const token = await userCredential.user.getIdToken();
        await createUserSession(token);
    } catch (error) {
        console.error("Error signing in with Google:", error);
        throw error;
    }
};

export const signInAsAGuest = async (event) => {
    try {
        const userCredential = await signInAnonymously(auth);
        const token = await userCredential.user.getIdToken();
        const user = await createUserSession(token);
        if (user) throw redirect("/in");
    } catch (error) {
        console.error("Error signing in as guest:", error);
        throw error;
    }
};

"use server";

import {
    GoogleAuthProvider,
    signInAnonymously,
    signInWithPopup,
} from "firebase/auth";
import { auth } from "./client-firebase";
import { createUserSession } from "./session";
import { redirect } from "@solidjs/router";

const googleProvider = new GoogleAuthProvider();

export const signInWithGoogle = async () => {
    try {
        const userCredential = await signInWithPopup(auth, googleProvider);
        console.log("Signed in with Google:", userCredential.user);

        const token = await userCredential.user.getIdToken();
        await createUserSession(token);
    } catch (error) {
        console.error("Error signing in with Google:", error);
        throw error;
    }
};

export const signInAsAGuest = async (event) => {
    try {
        const userCredential = await signInAnonymously(auth);
        const token = await userCredential.user.getIdToken();
        const user = await createUserSession(token);
        if (user) throw redirect("/in");
    } catch (error) {
        console.error("Error signing in as guest:", error);
        throw error;
    }
};

redirect raises an error, Error signing in as guest: Response {
status: 302, statusText: '', headers: Headers { location: '/in' }, body: null, bodyUsed: false, ok: false, redirected: false, type: 'default', url: '' }

17 Replies

peerreynders•6mo ago

With throw redirect... OK I see what's going on Your catch catches everything.

DeimosOP•6mo ago

Oh I see. How should I properly do it?

peerreynders•6mo ago

try

} catch (maybeError) {
  if (maybeError instanceof Response) throw maybeError;

  console.error("Error signing in as guest:", maybeError);
}

} catch (maybeError) {
  if (maybeError instanceof Response) throw maybeError;

  console.error("Error signing in as guest:", maybeError);
}

Probably

export const signInAsAGuest = async (event) => {
  let user;
  try {
    const userCredential = await signInAnonymously(auth);
    const token = await userCredential.user.getIdToken();
    user = await createUserSession(token);
  } catch (error) {
    console.error('Error signing in as guest:', error);
    throw error;
  }
  if (user) throw redirect('/in');
};

export const signInAsAGuest = async (event) => {
  let user;
  try {
    const userCredential = await signInAnonymously(auth);
    const token = await userCredential.user.getIdToken();
    user = await createUserSession(token);
  } catch (error) {
    console.error('Error signing in as guest:', error);
    throw error;
  }
  if (user) throw redirect('/in');
};

DeimosOP•6mo ago

No errors raised but it doesn't redirect to /in. It stays in /login.

peerreynders•6mo ago

Have you checked the Location header in the response? Is it /login or /in My first suspicion would be that client side protections for /in are still bouncing the redirect back to /login.

DeimosOP•6mo ago

It is /in in the response header. Do I have to manually get the location from response header and then navigate using useNavigate?

peerreynders•6mo ago

No. But I believe for some reason the logic in your /in route doesn't believe that authentication has taken place and immediately navigates to /login.

DeimosOP•6mo ago

Currently I do not have a folder called "in". I use FileRoutes. Do I have to create one to make it work? It navigates when I try using useNavigate in client side and it triggers 404 page. But redirect isn't working.

peerreynders•6mo ago

Create a dummy src/routes/in.tsx route and see what happens.

DeimosOP•6mo ago

It raises Hydration mismatch when I manually go to /in route. Also, redirect doesn't work.

peerreynders•6mo ago

It raises Hydration mismatch when I manually go to /in route.

For a bare bones static stub? That typically only happens when the HTML is so bad that Chrome starts to "helpfully" correct it. I believe that is a separate problem. The redirect problem suggests that there is something else going on outside of the scope that you have presented so far.

DeimosOP•6mo ago

Is it related to the use of FileRoutes? Should I just avoid FileRoutes?

peerreynders•6mo ago

Abandoning FileRoutes is throwing the baby out with bathwater. - can you create a simple new route (disregarding authentication for now) - that you can successfully load manually - and once that works redirect to it … that's just a basic sanity check to see whether something has gotten seriously bugged at the base.

DeimosOP•6mo ago

I will try it!. Thank you so much for your suggestions.

peerreynders•6mo ago

FYI: https://github.com/solidjs/solid-start/issues/1286

GitHub

[Bug?]: Hydration Error Occurs When Adding New Route · Issue #1286 ...

Duplicates I have searched the existing issues Latest version I have tested the latest version Current behavior 😯 The issue with Solid Start is that whenever I add a new route, it causes a hydratio...

DeimosOP•6mo ago

Yes I'm experiencing the same but different. Even if I restart the dev server it does't work. Now it works when I disable cache inside network tab. Also, can I ask you a question ? How can I check session using useSession from vinxi/http inside my entry-server.jsx. // @refresh reload import { createHandler, StartServer } from "@solidjs/start/server"; export default createHandler( () => ( <StartServer document={({ assets, children, scripts }) => ( <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> {assets} </head> <body> <div id="app">{children}</div> {scripts} </body> </html> )} /> ), { mode: "stream" } );

peerreynders•6mo ago

May I ask what you are trying to accomplish by accessing it there? Just trying to preempt the The XY Problem. Depending on the answer middleware may be called for and/or getCookie to prevent useSession from creating a new session by default.

Handle Cookie - h3

Use cookies to store data on the client.

Gaming

Programming

How do I redirect properly?