Magic Link redirects
I'm running supabase-auth-helpers-react on next.js and we have a login page that emails the user a magic link. Upon authorization when the link is clicked, the user should be redirected to the '/profile' page using:
supabase.auth.signIn(
{ email: data.email }, { redirectTo:
)
When the profile page is fetching the user data client side by hitting an api endpoint within the app, the redirect works accordingly.
const { user, error } = useUser()
useEffect(() => {
async function loadData() {
fetch(
.then(res => res.json())
.then(result => setInfo(result))
}
// Only run query once user is logged in.
if (user) {
try {
loadData()
console.log(user)
} catch (error) {
console.log(error)
}
}
}, [user])
When fetching the data using getServerSideProps, the redirect no longer works and i get sent to the home route of the app. The user is confirmed to be authorized and signed in when navigating back to the /profile page.
export const getServerSideProps = withPageAuth({
async getServerSideProps(ctx) {
const prisma = new PrismaClient()
// Access the user object
const { user, accessToken } = await getUser(ctx)
const prismaUser = await prisma.user.findUnique({
where: {
id: user?.id,
},
})
return {
props: {
user,
prismaUser,
},
}
},
})
Has anyone else experienced this redirect bug when fetching data server side rather than client side? Any help would be greatly appreciated!
supabase.auth.signIn(
{ email: data.email }, { redirectTo:
${process.env.NEXT_PUBLIC_HOST_DOMAIN}/profile })
When the profile page is fetching the user data client side by hitting an api endpoint within the app, the redirect works accordingly.
const { user, error } = useUser()
useEffect(() => {
async function loadData() {
fetch(
/api/users/${user?.id}).then(res => res.json())
.then(result => setInfo(result))
}
// Only run query once user is logged in.
if (user) {
try {
loadData()
console.log(user)
} catch (error) {
console.log(error)
}
}
}, [user])
When fetching the data using getServerSideProps, the redirect no longer works and i get sent to the home route of the app. The user is confirmed to be authorized and signed in when navigating back to the /profile page.
export const getServerSideProps = withPageAuth({
async getServerSideProps(ctx) {
const prisma = new PrismaClient()
// Access the user object
const { user, accessToken } = await getUser(ctx)
const prismaUser = await prisma.user.findUnique({
where: {
id: user?.id,
},
})
return {
props: {
user,
prismaUser,
},
}
},
})
Has anyone else experienced this redirect bug when fetching data server side rather than client side? Any help would be greatly appreciated!
