Getting Blitzjs CodeSandbox.Io Ready - Inifnite Loops Everywhere! RPC to Blame?

[l1ghtn1ngth1ef]

What is the problem?

Hey loving this amazing platform, unfortunatley unable to introduce to peers and collaborate as codesandbox instance throws an infinite loop by default straight off a fresh install!

Would love to help get this rectified asap.

Vid: https://www.awesomescreenshot.com/video/19721584?key=898e7cee95511db0313152a07fda91f8

Paste all your error logs here:

PASTE_HERE (leave the ``` marks)

Paste all relevant code snippets here:

PASTE_HERE (leave the ``` marks)

What are detailed steps to reproduce this?

1. Create local repo with 'blitz new blitzApp' and push to github.
2. Create Account and Login to codesandbox.io
3. Import Repository from step one and start the application.
4. Receive Inifnite loop on homepage basic fresh default brand new installation.

Video: https://www.awesomescreenshot.com/video/19721584

Frequency: Happens every time.

Run blitz -v and paste the output here:

yarn run v1.22.19
$ /project/home/perfectproductions/workspace/node_modules/.bin/blitz -v
Blitz version: 2.0.0-beta.31 (local)
Linux 5.15 | linux-x64 | Node: v16.17.0

 Package manager: npm

  System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (2) x64 AMD EPYC
    Memory: 864.48 MB / 2.01 GB
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.17.0 - /tmp/yarn--1691333664060-0.268803763317665/node
    Yarn: 1.22.19 - /tmp/yarn--1691333664060-0.268803763317665/yarn
    npm: 8.15.0 - /usr/local/bin/npm
  npmPackages:
    @blitzjs/auth: 2.0.0-beta.31 => 2.0.0-beta.31 
    @blitzjs/next: 2.0.0-beta.31 => 2.0.0-beta.31 
    @blitzjs/rpc: 2.0.0-beta.31 => 2.0.0-beta.31 
    @prisma/client: 4.6.1 => 4.6.1 
    blitz: 2.0.0-beta.31 => 2.0.0-beta.31 
    next: 13.4.5 => 13.4.5 
    prisma: 4.6.1 => 4.6.1 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^4.8.4 => 4.9.5 

Done in 1.02s.```

### Please include below any other applicable logs and screenshots that show your problem:

_No response_

[l1ghtn1ngth1ef]

Confirmed on over 10 fresh install attempts with numerous different code and settings changes.

Appears to be the useMutation logout method in the home page code. Unsure how to proceeed and need a pro to look into it! Officially loving blitzjs though that's for sure! App works great on my dev laptop!

[l1ghtn1ngth1ef]

Further research denotes getCurrentUser is somehow at fault, triggering an infinite loop in rpc calls.

Any ideas of a solution, component appears to be UserInfo on index page. Thanks!

[oyatek]

I have an infinite loop by adding a simple usePaginatedQuery that fetches a list of objects

[l1ghtn1ngth1ef]

I have an infinite loop by adding a simple usePaginatedQuery that fetches a list of objects

Does this loop involve codesandbox? https://codesandbox.io

[l1ghtn1ngth1ef]

Confirmed, as per oyateks statement, queryPaginate and paginate when included on codesandbox create an infinite loop.

So I modifed my repo to remove the getCurrentUser looping as its driving me crazy but its still a serious bug as per the opening comment and the original listing.

Additionally, and to confirm oyateks statement, looks like the issue is in blitz-rpc when calling getCurrentUser, paginate when imported from @blitzjs, and the RPC resolver as Itoo get an infinte loop when attempting to paginate and list pastes, evidence found here, https://www.awesomescreenshot.com/video/19815771?key=6f7d8fe139625629be290115d5ef82c2

Hoping for some movement on this asap as we intend to collab with blitzjs via codesandbox and really should be codesandbox ready for devs to pass around :)

Cheers!

[l1ghtn1ngth1ef]

Current Sandbox with issue can be found here! https://rb.gy/tgl8e

Please feel free to provide a fix, without comitting to the branch!

[siddhsuresh]

@PerfectProductions thanks for the issue, yes I have seen this issue while testing in codesandbox and would like it to be fixed quickly. Marking as ready to work on, anyone interested please fell free to submit a PR!

[l1ghtn1ngth1ef]

That's outstanding! Thanks @siddhsuresh. Awesome :)

[l1ghtn1ngth1ef]

Hi Brandon! Can't wait for this one!

I look forward to you giving Sid the Go ahead! :)

Wondeful Product Brandon, Wonderful product! Thanks! :)

[siddhsuresh]

Hey @PerfectProductions so rechecked with a codesandbox of my own. My PR is not really required.

So I went with a different direction not realising that the required cookies were not being set due to the SameSite:Lax policy being set by default.

So what needs to be done when we use services like codesandbox, is to add the following configuration:

//blitz-server.ts
const { gSSP, gSP, api } = setupBlitzServer({
  plugins: [
    AuthServerPlugin({
      cookiePrefix: "web-cookie-prefix",
      storage: PrismaStorage(db),
      isAuthorized: simpleRolesIsAuthorized,
      sameSite: "none", 👈
      secureCookies: true, 👈
    }),
  ],
  formatError: (error) => {
    return new Error("Formatted error" + error.message)
  },
  logger: BlitzLogger({}),
})

export { gSSP, gSP, api }

But make sure to revert back to lax or strict when moving to production

[l1ghtn1ngth1ef]

Hey @PerfectProductions so rechecked with a codesandbox of my own. My PR is not really required.

So I went with a different direction not realising that the required cookies were not being set due to the SameSite:Lax policy being set by default.

So what needs to be done when we use services like codesandbox, is to add the following configuration:

//blitz-server.ts
const { gSSP, gSP, api } = setupBlitzServer({
  plugins: [
    AuthServerPlugin({
      cookiePrefix: "web-cookie-prefix",
      storage: PrismaStorage(db),
      isAuthorized: simpleRolesIsAuthorized,
      sameSite: "none", 👈
      secureCookies: true, 👈
    }),
  ],
  formatError: (error) => {
    return new Error("Formatted error" + error.message)
  },
  logger: BlitzLogger({}),
})

export { gSSP, gSP, api }

But make sure to revert back to lax or strict when moving to production

Hi @siddhsuresh

Okay so I couldn't find the bug report this time, has a fix been implemented? Has this been pulled and approved? Has the fix been applied to future releases of blitzjs? Not sure baout the git platform at this stage, but learning! Also, thanks for the link to the discord channel! Please forgive me I'm jsut getting used to github!

I tried your fix, and I get a CSRFTokenMisMatch error!

Here's the video link! https://www.awesomescreenshot.com/video/20023299?key=a67a227705706e586825d6549ba343a9

My gear is funky enough to pass build validation and runs in production mode fine. Still doesn't like the codesandbox even with your code dropped in there?

What can I do ? Thanks sid! :)

[siddhsuresh]

has a fix been implemented?

A fix was not needed. This functionality was available to users for a some time now.

I tried your fix, and I get a CSRFTokenMisMatch error!

Can you clearing your local storage and cookies for the site and try again?

[l1ghtn1ngth1ef]

A fix was not needed. This functionality was available to users for a some time now.

I think it's fair to say we would all benefit from one regardless! :)

Can you clearing your local storage and cookies for the site and try again?

Of course! Have tried several times and now and also Incognito!

Here's the video link! https://www.awesomescreenshot.com/video/20024285?key=342a646bf0599cba550a8776d200cff8

I appreciate your replies a lot!

Thanks!

[l1ghtn1ngth1ef]

Definatley still getting the CSRFTokenMismatchError! :\

Can login successfully and the index.tsx loop is gone!

When I try to add a paste or return to the index.tsx this happens consistently, video link https://www.awesomescreenshot.com/video/20025449?key=3749b25cd653e8f530b2fc27501cca0d

Sorry if this is a trivial issue?

[siddhsuresh]

@PerfectProductions

I gave the code as an example. Please use the same cookie-prefix in both blitz-server and blitz-client files.

sameSite: "none", 
secureCookies: true, 

just add these options to your existing AuthServerPlugin configuration.

Sorry if this is a trivial issue?

No worries

[oyatek]

No, I'm not using codesandbox.io. But still get an infinite loop on one of my pages, which worked fine previously.

[siddhsuresh]

@oyatek please create a new issue, related to your specific issue, if possible a demo to debug easily.