S
SolidJS7mo ago
Deimos

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
peerreynders7mo ago
With throw redirect... OK I see what's going on Your catch catches everything.
Deimos
DeimosOP7mo ago
Oh I see. How should I properly do it?
peerreynders
peerreynders7mo 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');
};
Deimos
DeimosOP7mo ago
No errors raised but it doesn't redirect to /in. It stays in /login.
peerreynders
peerreynders7mo 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.
Deimos
DeimosOP7mo 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
peerreynders7mo 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.
Deimos
DeimosOP7mo 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
peerreynders7mo ago
Create a dummy src/routes/in.tsx route and see what happens.
Deimos
DeimosOP7mo ago
It raises Hydration mismatch when I manually go to /in route. Also, redirect doesn't work.
peerreynders
peerreynders7mo 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.
Deimos
DeimosOP7mo ago
Is it related to the use of FileRoutes? Should I just avoid FileRoutes?
peerreynders
peerreynders7mo 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.
Deimos
DeimosOP7mo ago
I will try it!. Thank you so much for your suggestions.
peerreynders
peerreynders7mo ago
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...
Deimos
DeimosOP7mo 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
peerreynders7mo 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.
Want results from more Discord servers?
Add your server