Replies: 4 comments 4 replies
-
I recommend you to store the redirectTo in the session before calling |
Beta Was this translation helpful? Give feedback.
-
Hi @sergiodxa, I have implemented the redirect based on your code (https://sergiodxa.com/articles/add-returnto-behavior-to-remix-auth). I have use the last code block (custom login page with some button for providers) and it does work fine for login. I have noticed an issue while logging out tough. For this I have a simple form which calls this action: export let action: ActionFunction = async ({ request }) => {
const url = new URL(request.url);
const redirectTo = url.searchParams.get("redirectURL") ?? "/";
await authenticator.logout(request, { redirectTo });
}; It does work as expected for e.g. Google but not for Facebook. The latter appends It seems like the hash at the end of the URL breaks things. |
Beta Was this translation helpful? Give feedback.
-
@sergiodxa it‘s a Facebook thing and has nothing to do with a strategy provider or an auth plugin. It looks the same with Next Auth. I get indeed redirected but loaders are not called on the first redirect (fron the URL with hash to the same with out it). I‘ve played with it a little bit and it generally a problem with a hash in the URL. It can be a Remix issue. |
Beta Was this translation helpful? Give feedback.
-
@sergiodxa I am trying to adapt your current solution for However the import { LoaderFunction, json } from "remix";
import { auth } from "~/services/auth.server";
import { returnToCookie } from "~/services/cookies.server";
export let loader: LoaderFunction = async ({ request }) => {
let url = new URL(request.url);
let returnTo = url.searchParams.get("returnTo");
let headers = new Headers();
if (returnTo) {
headers.append("Set-Cookie", await returnToCookie.serialize(returnTo));
}
let data = await getData(request);
return json(data, { headers });
}; For Here is my current export const action: ActionFunction = async ({request}) => {
const formData = await request.clone().formData();
const strategy = formData.get('strategy') as string;
return await strategyLogin(strategy, request);
}; Here is my current export const loader: LoaderFunction = async ({request}) => {
const returnTo = new URL(request.url).searchParams.get('returnTo');
const headers = new Headers();
if (returnTo) {
headers.append('Set-Cookie', await returnToCookie.serialize(returnTo));
}
const user = await auth.isAuthenticated(request);
if (user) return redirect(`/u/${user.name}`);
const session = await sessionStore.getSession(request.headers.get('Cookie'));
const error = session.get(auth.sessionErrorKey);
return error
? json<LoaderData>(
{error: JSON.parse(error.message)},
{headers: returnTo ? headers : undefined}
)
: {};
}; This loader works for Thank you. |
Beta Was this translation helpful? Give feedback.
-
Usually when a user navigates to a route that requires authentication, the application will redirect to some login page with a redirection parameter that corresponds to the original url the user attempted to access. For local based authentication, it's trivial to pluck this parameter from the URL (or append to a hidden input field) and properly redirect the user to the appropriate page post login.
However, for OAuth/OpenID Connect based authentication flows, this is a bit more complicated. Providers like Auth0 recommend storing this information in
state
(https://auth0.com/docs/configure/attack-protection/state-parameters#redirect-users) and is what I've typically done in the past with other frameworks. Unfortunately, it seems thatremix-auth
only provides a staticsuccessRedirect
parameter which the developer must specify upfront.I’ve thought through a potential approach for solving this with
remix-auth
:successRedirect
andfailureRedirect
are optional parameters onauthenticate
. If these values are passed in during the login process, the library could serialize the parameters into thestate
parameter that is sent to the OAuth provider:After verifying the
state
, the library could then automatically redirect to the appropriate paths based on those serialized values (or ignore them if they are explicitly passed into the secondary authenticate call in the callback route).Thoughts?
Beta Was this translation helpful? Give feedback.
All reactions