bug: Protected pages don't work on pages

[redimongo]

Describe the bug

When I use the following code in an API route it works and shows the user is Unauthorized prints our that it's isAuthorised:false

// pages/api/protected-resource.ts
import { logtoClient } from '../../../lib/logto';

export default logtoClient.withLogtoApiRoute(
  (request, response) => {
    console.log(request.user);
    if (!request.user.isAuthenticated) {
      response.status(401).json({ message: 'Unauthorized' });

      return;
    }

    // Access token can be obtained from request.user.accessToken

    response.json({
      data: 'this_is_protected_resource',
    });
  },
  { getAccessToken: true, resource: 'https://drn1.com.au' }
);

But when I do it in pages/staff for a client end view it prints our that it's isAuthorised:true

/pages/staff/protected.ts

import { LogtoContext } from '@logto/next';
import { logtoClient } from '../../lib/logto';

type Props = {
  user: LogtoContext;
};

const Profile = ({ user }: Props) => {
    return <div>{user?.claims?.sub}</div>;
};

export default Profile;

export const getServerSideProps = logtoClient.withLogtoSsr(
  async function ({ req }) {
    const { user } = req;

    // Access token can be obtained from user.accessToken
    console.log(JSON.stringify(user));
    return {
      props: { user },
    };
  },
  { getAccessToken: true, resource: 'https://drn1.com' }
);

Context

OS: Mac OS

Environment: Localhost (nextJS)

Logto version: 1.0.0

Node version: v16.15.1
npm version: v8.11.0

the user has no roles

[redimongo]

Also tried the code that is in the sample code and it does not work, I can't get any error message or in fact even know if it is accessing it correctly:

/pages/staff/protected.ts

import Link from 'next/link';
// eslint-disable-next-line import/no-named-as-default
import Router from 'next/router';
import { useEffect } from 'react';
import useSWR from 'swr';

const Protected = () => {
  const { data, error } = useSWR<{ data: string }, Error>('../api/protected');

  useEffect(() => {
    if (error?.message === 'Unauthorized') {
      // eslint-disable-next-line @silverhand/fp/no-mutating-methods
      void Router.push('../api/logto/sign-in');
    }
  }, [error]);

  return (
    <div>
      <header>
        <h1>Hello Logto.</h1>
      </header>
      <nav>
        <Link href="/">Go Home</Link>
      </nav>
      {data && (
        <div>
          <h2>Protected resource:</h2>
          <div>{data.data}</div>
        </div>
      )}
    </div>
  );
};

export default Protected;

/pages/api/protected.ts

import { logtoClient } from '../../lib/logto';

export default logtoClient.withLogtoApiRoute(
  (request, response) => {

    console.error("PAGE REQUESTED");
    if (!request.user.isAuthenticated) {
      response.status(401).json({ message: 'Unauthorized' });

      return;
    }

    // Get an access token with the target resource
    console.log(request.user.accessToken);

    response.json({
      data: 'this_is_protected_resource',
    });
  },
  {
    getAccessToken: true,
    resource: 'http://staff.domain.com'
  }
);

When I go to https://localhost:3000/api/protected the code works and says Unauthorized when I run it in the /pages/staff/protected.ts it does nothing the page just loads and says Hello Logto

[redimongo]

Solution to my issue - I hope someone is able to use this.

Suggestion - not all developers use TS would be good to see Javascript examples.

Javascript code:

import Link from 'next/link';
import Router from 'next/router';
import { useEffect } from 'react';
import useSWR from 'swr';

const fetcher = async (url) => {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        const error = new Error();
        error.info = await response.json();
        error.message = error.info.message; 
        error.status = response.status;
        throw error;
      }
      return response.json();
    } catch (error) {
      console.error(error);
      throw error;
    }
  };
  


const Protected = () => {
  const { data, error } = useSWR('/api/protected',fetcher);

  useEffect(() => {
    console.log(error?.message);
    if (error?.message === 'Unauthorized') {
      void Router.push('/api/logto/sign-in');
    }
  }, [error]);

  return (
    <div>
      <header>
        <h1>Hello Logto.</h1>
      </header>
      <nav>
        <Link href="/">Go Home</Link>
      </nav>
      {data && (
        <div>
          <h2>Protected resource:</h2>
          <div>{data.data}</div>
        </div>
      )}
      {error && (
        <div>
          <h2>ERROR:</h2>
        </div>
      )}
    </div>
  );
};

export default Protected;

[redimongo]

More info the following does not work even if the person has the scope on their profile. Using just the sample code from the next-sample

import { logtoClient } from '../../lib/logto';

export default logtoClient.withLogtoApiRoute(
  (request, response) => {

    console.error("PAGE REQUESTED");
    if (!request.user.isAuthenticated) {
      response.status(401).json({ message: 'Unauthorized' });

      return;
    }

    // Get an access token with the target resource
    console.log(request.user.accessToken);

    response.json({
      data: 'this_is_protected_resource',
    });
  },
  {
    getAccessToken: true,
    resource: 'http://staff.domain.com'
  }
);

It just comes back as unauthorised.

It does however work when they login with the scope instead the logtoClient config which we should not have to do. As it logs all users in with that permission.

This is what I have found out.:

When I make a connection to logtoClient like this

import LogtoClient from '@logto/next';

export const logtoClient = new LogtoClient({
  appId: 'XXXXX',
  appSecret: 'XXXX',
  endpoint: 'https://login.domain.com',
  baseUrl: 'http://localhost:3000',
  cookieSecret: 'XXXXXX',
  cookieSecure: process.env.NODE_ENV === 'production',
  resources: ['https://staff.DOMAIN.com']
});

It is letting every user even the ones that don't have the resource assigned to them to access that resource. That should not happen.

But that is the only way to allow me to access the protected page when I use

import { logtoClient } from '../../libraries/logto';

export default logtoClient.withLogtoApiRoute(
  (request, response) => {
    if (!request.user.isAuthenticated) {
      response.status(401).json({ message: 'Unauthorized' });

      return;
    }

    // Get an access token with the target resource
    console.log(request.user.accessToken);

    response.json({
      data: 'this_is_protected_resource',
    });
  },
  { 
    getAccessToken: true,
    resource: 'https://staff.DOMAIN.com'
  }
);

[waltcow]

@redimongo I am using logtoClient.withLogtoApiRoute as middleware to protect my route , but another issue occur #461 , do you meet the same issue here ?

[redimongo]

@redimongo I am using logtoClient.withLogtoApiRoute as middleware to protect my route , but another issue occur #461 , do you meet the same issue here ?

Sorry I don't use windows and don't have edge. Also we are not using a middleware.

This is using the documentation as is in the next-sample without modifications.

[redimongo]

Can anyone assist with this problem?

I have tried everything from going line by line, I think the error is something to do with the following.
The reason being, I have checked everything I even used the cloud service that logto.io offers to make sure it was not an installation issue.

I believe that because the logtoConfig is not requesting the data at login it is not able to read the users resources.

The easy solution to this would be for logto.io to be sending all the user data when the login, we then would be able to just do a simple if function to check if the resource is in their profile. It's nothing special does not require us to send lots of commands and does not over complicate this issue.

logtoConfig: {
    appId: 'XXXXX',
    appSecret: 'XXXXXX',
    endpoint: 'https://login.domian.com',
    baseUrl: 'http://localhost:3000',
    cookieSecret: 'QIxA79Xs89syftp7OSRav0K9O2U460Pw',
    cookieSecure: false,
    scopes: [
      'openid',
      'offline_access',
      'profile',
    ],
    prompt: 'consent'
  },

Alternatively I guess is we make our own callback page and then insert any database logic we want into it, and go from there and remove the need to request this data from logto.io.

The issue is how.

[wangsijie]

Hey, you should set the resource https://drn1.com.au in LogtoConfig first:

logtoConfig: {
    resources: ['https://drn1.com.au'],
    ...
},