In the backend, I’m generating a URL using the Nylas Node.js SDK with the following code snippet:
const options = {
clientId: Config.get('email.nylas.clientIdv3'),
redirectUri: Config.get('email.nylas.authRedirectURIv3'),
scopes: ['email', 'calendar', 'contacts'],
state: randomString,
accessType: 'offline',
};
let nylasURL = this._client.auth.urlForOAuth2(options);
After a successful login, I exchange the authorization code for an access token using this code:
const nylasResponseData = await this._client.auth.exchangeCodeForToken({
clientSecret: Config.get('email.nylas.clientSecretv3'),
clientId: Config.get('email.nylas.clientIdv3'), // This differs from the API key
redirectUri: Config.get('email.nylas.authRedirectURIv3'),
code: response.code,
});
My redirectUri while generating the url isn’t localhost, it is “https://mydomain.com/authNylas/store”
I store the access token, grant ID, and other user-related information in the backend. Now, I want to integrate the Nylas scheduler into my Vue.js project. Since I’m using Vue.js, I’m importing the Nylas scheduler as a Vanilla JS wrapper. I send the access token from the backend to the frontend via an API, and the frontend has the access token. However, I’m facing an issue where the scheduler doesn’t function correctly and i receive CORS error whenever i try opening the scheduler. I’ve been stuck on this for a few days, and any help would be greatly appreciated. Here is the frontend code:
openV3Scheduler() {
this.schedularEditorDialog = true;
this.$nextTick(() => {
const schedulerEditor = document.querySelector('nylas-scheduler-editor');
schedulerEditor.schedulerPreviewLink = `${window.location.origin}/?config_id={config.id}`;
const nylasApiRequest = new CustomIdentityRequestWrapper(
'access token from backend',
'https://api.us.nylas.com/v3'
);
schedulerEditor.nylasApiRequest = nylasApiRequest;
});
}
Here is my CustomApiWrapper for Nylas:
export class CustomIdentityRequestWrapper {
accessToken
domain
constructor(accessToken, domain) {
// Initialize the class
this.accessToken = accessToken
this.domain = domain
}
async request(args) {
try {
const response = await fetch(`${this.domain}/grants/me/${args.path}`, {
method: args.method,
body: JSON.stringify(args.body),
headers: {
...args.headers,
Authorization: `Bearer ${this.accessToken}`,
'Content-Type': 'application/json',
},
})
// Check if the response is not okay (e.g., 404, 500)
if (!response.ok) {
console.error(`Error: ${response.status} ${response.statusText}`)
return { error: `Error: ${response.status} ${response.statusText}` }
}
// Parse the response
const data = await response.json()
return [data, null]
} catch (error) {
console.error('Fetch error:', error)
return { error: 'Error' }
}
}
/**
* This method returns the current user's information.
*/
async currentUser() {
// IMPLEMENT: Get the logged in user's ID token and return the user information
return {
// id: 'idToken',
// email: 'abc@gmail.com',
// name: 'Hammad',
// provider: 'google',
}
}
/**
* This method sets the default authentication arguments to use when authenticating the user.
*/
async setDefaultAuthArgs(authArgs) {
// Set the default authentication arguments
return authArgs
}
/**
* This method returns the URL to redirect the user to for authentication.
*/
async authenticationUrl() {
// IMPLEMENT: Return the URL to redirect the user to for authentication
return 'http://localhost:8080/scheduler-editor'
}
}
My user has already authenticated his email and has given me permission for calendars, events and mailing. I want to skip the user from logging in again in the scheduler UI.