Question

How to transition from Personal Access Token to JWT in Zitadel Integration

I’m currently working on setting up a custom login UI that integrates with Zitadel for a project involving three domains: example.com, auth.example.com, and app.example.com.

The flow goes like this: users land on example.com, and if they want to sign in or sign up, they get redirected to auth.example.com, where the sign-in and sign-up pages are hosted. After successfully signing up or logging in, they’re sent over to app.example.com.

Initially, I used personal access tokens for the Zitadel API calls, but now I’m looking to switch to JWT for authentication. I’ve gone through the docs but haven’t found a clear path on how to make this transition.

Specifically, I’m struggling with figuring out how to replace the personal access token with JWT in the Zitadel API calls for user authentication during login and signup.

If anyone has experience with Zitadel and JWT integration or can point me in the right direction with some code snippets or examples, I’d really appreciate the help.


Submit an answer


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Bobby Iliev
Site Moderator
Site Moderator badge
January 2, 2024

Hi there,

Transitioning from using Personal Access Tokens to JWT JSON Web Tokens for authentication in Zitadel integration would require quite a bit of refactoring.

You will need to set up JWT-based authentication in your application and modifying your API calls to use JWTs instead of Personal Access Tokens.

Here’s a basic guide on how this might look:

Implementing the JWT-Based Authentication Flow

  1. Initiate User Authentication:

    • Direct users to sign in or sign up on auth.example.com.
    • Authenticate these requests against Zitadel’s authentication service.
    • On successful authentication, Zitadel will issue a JWT.
  2. Set Up OAuth 2.0 Flow: If you’re using OAuth 2.0 flows, you’ll redirect users to Zitadel’s authorization endpoint:

    • Redirect users to Zitadel’s OAuth 2.0 authorization endpoint.
    • Upon successful login, Zitadel redirects to your callback URL with an authorization code.
    • Exchange this code for a JWT at Zitadel’s token endpoint.

Handling JWT in Your Application

Next, once you have the JWT token, you’ll need to handle it in your application:

  1. Store the JWT securely in your application context (e.g., in memory, session storage, or a secure cookie). Ensure it’s only accessible by the necessary parts of your application.

  2. After that you can start using JWT in API Calls:

    • Replace the Personal Access Token with the JWT in your API calls.
    • Typically, the JWT is sent in the HTTP Authorization header using the Bearer schema:
      Authorization: Bearer <JWT_token>
      

Code Snippet for API Calls with JWT

Here’s an example of how you might modify an API call to use JWT in JavaScript:

const jwt = 'your_jwt_token'; // Replace with the actual JWT token
const apiUrl = 'https://api.zitadel.com/some_endpoint';

fetch(apiUrl, {
  method: 'GET', // or 'POST', 'PUT', etc.
  headers: {
    'Authorization': `Bearer ${jwt}`,
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Always transmit JWTs over secure channels (HTTPS) and be cautious about where you store the JWT in the client-side environment. Consider using HTTPOnly cookies if applicable.

The Zitadel’s official documentation might be helpful for specific endpoints and detailed examples:

https://zitadel.com/docs/concepts/structure/jwt_idp

Hope this helps! Let me know if you have any questions.

Best,

Bobby

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel