Toolkit: Authenticate and RedirectTo not working as expected

[paulm17]

What is the problem?

Using the latest toolkit .60.

Home.authenticate = { redirectTo: Routes.LoginPage() }

Doesn't seem to do anything. Have confirmed nothing in the application Tab in dev tools.

Also

LoginPage.redirectAuthenticatedTo = Routes.Home()

Seems to create the following error, when authenticated and hitting the page:

Run blitz -v and paste the output here:

Blitz version: 2.0.0-alpha.53 (global)
Blitz version: 2.0.0-alpha.60 (local)
macOS Monterey | darwin-arm64 | Node: v18.4.0


 Package manager: npm

  System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 556.45 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.4.0 - ~/.nvm/versions/node/v18.4.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.4.0/bin/yarn
    npm: 8.12.1 - ~/.nvm/versions/node/v18.4.0/bin/npm
  npmPackages:
    @prisma/client: Not Found
    blitz: Not Found
    next: Not Found
    prisma: Not Found
    react: Not Found
    react-dom: Not Found
    typescript: Not Found

[alfonmga]

It seems Passport.js integration is broken. I tried to refactor a legacy Blitz app to v2 and after a lot of plumbing and several hours, I decided to give up.

I stumbled upon a Missing Blitz sessionMiddleware! error when processing a callback for a Passport strategy. Blitz passport adapter does a session assertion before processing the callback request and it will always fail because a previous anonymous session has not been created or even if there's an existing one, it is not able to access to it (I tried to create one manually).

[dillondotzip]

It seems Passport.js integration is broken. I tried to refactor a legacy Blitz app to v2 and after a lot of plumbing and several hours, I decided to give up.

I stumbled upon a Missing Blitz sessionMiddleware! error when processing a callback for a Passport strategy. Blitz passport adapter does a session assertion before processing the callback request and it will always fail because a previous anonymous session has not been created or even if there's an existing one, it is not able to access to it (I tried to create one manually).

Can you open a different issue for this?

[beerose]

Hey @paulm17,

I tested the Page.redirectAuthenticatedTo, Page.authenticate methods with both strings, route objects, booleans, but it seems to work correctly. I'm using the latest blitz — 2.0.0-alpha.67.

However, I did see the Error: Hydration failed because the initial UI does not match what was rendered on the server. popup.

After some debugging, I nailed it down to the styled-jsx used in Form and LabeledTextField components. Removing <style global jsx ... solves the problem.

I think it's related to the Received truefor a non-boolean attributejsx. error. It looks like styled-jsx doesn't work with SWC — using .babelrc instead of swc makes the problem disappear.

I don't know why it doesn't work with SWC, though. The docs say that it should work out of the box (https://github.com/vercel/styled-jsx#using-in-nextjs).

[paulm17]

@beerose Thanks. I will give it another test when another patch is released to fix the issue you mention. 👍

[paulm17]

Hi @beerose

(have upgraded to .68 now)

So the redirection is somewhat working... 😓

I have my login page set with

LoginPage.redirectAuthenticatedTo = Routes.Home()

But when I hit /auth/login, it redirects to home. Although I have no current session.

https://www.loom.com/share/0814f0627ca34d68aed2dfbb449379b4

Also, if I hit / (index) it's supposed to redirect to login. But does nothing

Home.authenticate = { redirectTo: Routes.LoginPage() }

Oh and excuse the horrible css. Have yet to install tailwind.

[beerose]

Hey @paulm17,

So I again tried to reproduce it but everything works fine for me. Here's an example app: https://github.com/beerose/blitz-alpha-auth-redirects-demo (it's a brand new blitz app with modified index.tsx and login.tsx).

As for the hydration error — it seems to be related to styled-jsx that we use in the template. Could you open a new issue for that?

[paulm17]

@beerose Alright. I'll test out the example app and go from there. It's going to be a bit, because I'm in the middle of something and want to get that finished before I circle back...

[beerose]

Sure, take your time!

In the meantime, I'll move this issue to a to do column since it doesn't seem like a blocker for the beta release as it works well in other projects.

[medihack]

Not sure if this is the same issue, but I am also having trouble with redirection. I am using LoginPage.redirectAuthenticatedTo = Routes.HomePage() in my login page and when I visit it as a logged-in user then the site just gets blank. No error message, no redirection. I try to investigate this further, but without an error hint this is quite hard.

[paulm17]

@medihack Do you see a 320 in the titlebar or a 320 ./ in the middle of the page? (when it tries to redirect)

[medihack]

@medihack Do you see a 320 in the titlebar or a 320 ./ in the middle of the page? (when it tries to redirect)

No, not really. I visit the login site. It appears for a some moment (milliseconds) and then disappears, leaving a blank screen. No errors in the browser console, nor in the server console. No title change. I'll try to create a minimal example, but that's not so easy as so much is going on in the app (Redux, i18next, ...). But I also have trouble with redirecting using the router after login, so maybe it's another issue than yours.

[medihack]

Ok, I looked into it again, and all my redirection problems are associated with redirectAuthenticatedTo. As soon as I add it to e.g. my LoginPage (LoginPage.redirectAuthenticatedTo = Routes.HomePage()) it fails in several ways (mostly by just leaving me with a blank screen).

[lhocke]

just adding my own experience as a +1 for this, I'm getting the hydration error with 2.0.0-alpha.69 and also seeing /next=2%F{pageRedirectedFrom} appended to the url after redirect. Not sure if that's relevant, a result of the error, or something else entirely. I did try removing the global jsx tags from the form components to see if that resolved anything, but the problem persists. I'll try with the example app later today/tomorrow morning and report back if problem persists

[dbrxnds]

After some debugging, I nailed it down to the styled-jsx used in Form and LabeledTextField components. Removing <style global jsx ... solves the problem.

Hi @beerose, we do not use any styled JSX in our project and still have the same problem as well. Any idea what else it could come from?

[paulm17]

Same here. I removed all traces of the original form components and using a forked version of remix-forms.

[lhocke]

I think I've resolved my issue, I had moved the footer into app/core/layouts/Layout.tsx and placed it below {children} which appears to cause a mismatch when the page is compiled. Placing it above {children} or moving it to pages/_document.tsx appears to have resolved the issue. I'll continue fiddling about and see if it pops up again.

[gcavanunez]

Just did a fresh install of blitz and ran into the hydration mismatch error reported above, was able to fix it by upgrading to react and react-dom to v18.2.0

If using typescript however, you will also need to upgrade to next 18.2.0, since error messages around the <style jsx global> will other wise persist.

[dbrxnds]

Temporary workaround for Page.authenticate not working is to use useAuthorize.

[lksnmnn]

@gcavanunez If you create a fresh Blitz app now (it uses 18.2.0) can you confirm the styled-jsx is still gone for you? Because I still see the hydration issues.