implementing routing with or without login

[moonhee0507]

Hi.

I'm implementing page access restrictions based on login or not.
I'm making 404 pages render if it's inaccessible (redirection will be added when needed).

The logged-in user information (e.g. { user: { isLoggedIn: boolean, info: any }}) was placed in pageContext and handed over to index.page.routes.ts on page /login and /signup.

However, there is a problem when moving from /login to /signup page.
The URL is changed to /signup, and /login is rendered.

If I'm using the routing system incorrectly, I'd like you to teach me how to use the routing system correctly.

// _default.page.route.tsx

import type { PageContext } from './types';

export const CONDITIONAL_ACCESSIBLE_PAGE = ['/login', '/signup'];

export async function onBeforeRoute(pageContext: PageContext) {
    const { token } = pageContext;

    /**
     * @token
     * @user { isLoggedIn: boolean; info: UserInfo } (default: { isLoggedIn: false; info: null })
     */

    try {
        let fetch;

        if (typeof window === 'undefined') {
            const nodeFetch = await import('node-fetch');
            fetch = nodeFetch.default;

            const res = await fetch(`http://localhost:5000/api/users/check-token`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ token: token }),
            });

            const authInfo: any = await res.json();

            return {
                pageContext: {
                    user: {
                        isLoggedIn: authInfo.auth || false,
                        info: authInfo.auth ? authInfo.user : null,
                    },
                },
            };
        } else {
            fetch = window.fetch;
            const res = await fetch(`http://localhost:5000/api/users/`);

            const authInfo: any = await res.json();

            return {
                pageContext: {
                    user: {
                        isLoggedIn: authInfo.success || false,
                        info: authInfo.success ? authInfo.user : null,
                    },
                },
            };
        }
    } catch (err) {
        console.error(err);
    }
}

// /pages/login/index.page.route.ts
// /pages/signup/index.page.route.ts

import { CONDITIONAL_ACCESSIBLE_PAGE } from '../../renderer/_default.page.route';
import type { PageContext } from '../../renderer/types';

export default (pageContext: PageContext) => {
    if (userIsLoggedIn(pageContext)) {
        if (pageContext.urlOriginal && CONDITIONAL_ACCESSIBLE_PAGE.includes(pageContext.urlOriginal)) {
            return false;
        }
    }

    return true;
};

function userIsLoggedIn(pageContext: PageContext) {
    return pageContext.user.isLoggedIn;
}

[brillout]

Why don't you resolve the user before calling renderPage()? I don't see the need to do it also on the client-side?

[moonhee0507]

I wanted to create an Auth feature that works with both CSR and SSR.

As you told me, I called it on RenderPage and used it, and it was solved. Thank you.

[brillout]

👍 Btw. in case you can convince your employer: https://github.com/sponsors/brillout.