Update basic auth implementation in examples.

[lfades]

The example api-routes-apollo-server-and-client-auth has a better auth implementation (added in #13849) that the one in other auth examples with basic auth. Those are:

• with-passport
• with-magic
• with-passport-and-next-connect

Having a better basic auth implementation in examples is going to be very useful before landing #16277

[pkellner]

@lfades , I just tried the with-passport example and I love how it works in development, but when I run "npm run build", then "npm start", login does not create a cookie (like it does in dev mode).

Also, I'm wanting to see how a page can be rendered statically when there is no auth, but with server when logged in. It would be helpful to include the username on the home (index.js) page to show the user is logged in and dynamic data is being displayed. That is "Logout user xxxx".

I think this is a bug but not sure as I've not really looked at api's yet and maybe everyone understand how that works except me and I should not expect the app to work in production.

[lfades]

@pkellner I don't think the example is meant to work in production on localhost, because https is not enabled and cookies can't be set as secure. We use a check in this line to set the cookie as secure if NODE_ENV is set to production.

About the second question, you can't render a page statically and then decide to use a function for it. There's no function execution for static pages, it goes directly to the edge to get the static file.

[pkellner]

Thanks @lfades , regarding the 2nd question. For a typical "product catalog" type site that could benefit from static rendering when the user is not authenticated, but also has the capability to include a different state when the user is logged in, that is to show things like the username on the page as well as possibly custom pricing, is there a pattern to support that everyone but me knows about? That is, maybe something like client side codes checks for auth and updates? or special URL https://.../catalog/101/loggedIn

[lfades]

@pkellner You render a loading state, aka skeleton while the static page loads, and add the user info right after. That's how twitter, youtube, vercel, and many other sites do it.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.