ivandotv / nextjs-client-signin-logic

Example of implementing client sign-in flow with Next.js and protecting static pages from unauthorized access.

Next.js client-side sign in logic

This is an example repository to accompany my article: Protecting static pages in Next.js application

It demonstrates the logic for implementing client sign-in flow with Next.js and protecting static pages from unauthorized access.

Check it out live: static page login example

nextjs-client-signin-logic's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @next/eslint-plugin-next to v14
• chore(deps): update dependency @types/node to v20
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-config-prettier to v9
• chore(deps): update dependency eslint-plugin-prettier to v5
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency typescript to v5
• chore(deps): update react monorepo to v18 (major) (@types/react, react, react-dom)
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• next 12.3.4
• react 17.0.2
• react-dom 17.0.2
• @next/eslint-plugin-next ^12.0.9
• @types/node ^17.0.13
• @types/react ^17.0.38
• @typescript-eslint/eslint-plugin ^5.10.2
• @typescript-eslint/parser ^5.10.2
• eslint ^8.8.0
• eslint-config-prettier ^8.3.0
• eslint-plugin-prettier ^4.0.0
• eslint-plugin-react ^7.28.0
• eslint-plugin-react-hooks ^4.3.0
• prettier ^2.5.1
• typescript ^4.5.5

---

• Check this box to trigger a request for Renovate to run again on this repository

Redirect back to public page

Hello Ivan

I found this package very useful and integrated it into my application. Very nice work :)

I had one small issue: If I'm on a public page then sign-in, I'm not returned back to that page. It only works for private pages. I fixed this by wrapping all pages in <AuthGuard> regardless of whether they're public or private, then in AuthGuard.tsx I changed the useEffect function to look like this:

    useEffect(() => {
        if (!initializing) {
            //auth is initialized and there is no user
            if (!user) {
                if (!skipRedirect) {
                    // Set redirect unless it's a special route
                    // for which it should be skipped.
                    setRedirect(router.route)
                }
                if (requireAuth) {
                    router.push("/signin")      
                }
            }
        }
    }, [initializing, router, user, setRedirect])

This requires an extra property for the page called skipRedirect, which doesn't need to be set except for pages which you don't want to redirect back to ― such as the sign-in page.

I haven't got time to do a PR but I think this would be a nice addition.