Implementing JWT Signing with a 3rd Party Auth System

I am trying to implement the NextJS Todo Demo app with Appwrite. But, I am using a XYZ app to authenticate users. Now once the user is checked as isAuthorized, based on its userId, I want to create a jwt token and sign it for the Appwrite session so that I will be able to fetch ToDo documents associated with this userId from Appwrite.

I just want someone to check my code and guide me to do it in a correct way.

I am currently using getServerSideProps.

TypeScript

export const getServerSideProps = async (context) => {
  const loginProps = await getAuthenticatedUserFromSession(
    context.req,
    context.res
  );

  if (loginProps.isAuthorized) {
    const appwrite = getAppwrite(loginProps.userID);
    const database = new Databases(appwrite, process.env.APPWRITE_DATABASE_ID);
    const { data } = await database.listDocuments(
        process.env.APPWRITE_DATABASE_ID,
        process.env.APPWRITE_COLLECTION_ID,
        )

    return {
      props: {
        isAuthorized: loginProps.isAuthorized ?? false,
        userID: loginProps.userID ?? "",
        initialTodos: data ?? [],
      },
    };
  } else {
    return {
      props: {
        isAuthorized: loginProps.isAuthorized ?? false,
        userID: loginProps.userID ?? "",
      },
    };
  }
};

TL;DR

The user is trying to implement JWT signing with a third party authentication system in their Next.js app using Appwrite. They are having trouble with user authentication and fetching todo documents associated with the user's ID from Appwrite. They have provided some code and are looking for guidance on the correct approach. Solution: 1. The user needs to ensure that the user is authenticated with Appwrite in their Next.js app. 2. They should check the `getAppwrite` function to make sure it is correctly retrieving the user's account and generating a JWT token. 3. The user should verify that they are setting the JWT token in the App

And this is how the getAppwrite function looks like. But I am unable to fetch any ToDo documents. So, I believe the user authentication is not working properly. I have created a few records with the same userId column in the console.

TypeScript

const getAppwrite = async (userId) => {
    if (userId) {
      const payload = {
        userId,
        exp: Math.floor(Date.now() / 1000) + 60 * 60,
      };
  
      try {
        const client = new Client()
          .setEndpoint(Server.endpoint)
          .setProject(Server.project);
  
        const account = new Account(client);
  
        const userAccount = await account.get();
        console.log(userAccount);
  
        const app = { account, database };
  
        const response = await account.createJWT();
        const jwtToken = response.jwt;
        console.log(response);
  
        const token = jwt.sign(payload, jwtToken);
  
        client.setHeader('X-Appwrite-Header', token);
  
        return client;
      } catch (error) {
        console.log(error);
      }
    }
  };

Uhh how is the user authenticated to Appwrite in your nextjs app? 🧐

I am trying to sign jwt token with the logged in user's userid in the payload. However, my approach could be wrong as I trying to use Appwrite in an app for the first time. So, basically a 3rd part app is taking care of the user login and registrations and I have a TODO collection in appwrite that I want to fetch and show for each user based on the userId. Please suggest what will be the correct workflow to implement this.

account.get and account.createJWT require an Appwrite session. If you're using some other system to authenticate, there is no Appwrite session and you probably can't take advantage of the Appwrite permission system.

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more

Recommended threads

Need support?

Join our Discord

Get premium support