Question

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

Posted on January 1, 2024
API JavaScript
Asked by 4ba0f48812924414ada90b830cd303

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!

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

• 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

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.
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:

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.
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: