In version 3 of Nylas Scheduler, users are redirected to the login page when initially loading the Scheduler editor. This article provides a solution to prevent this redirection using plain HTML and JavaScript. Follow the example provided to ensure users can access the Scheduler editor without being redirected to the login page.
<!-- scheduling-editor.html -->
<!DOCTYPE html>
<html class="h-full bg-white" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nylas Scheduler Editor Component</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
<script type="module" src="https://unpkg.com/@nylas/web-elements@latest"></script>
<script type="module" src="https://unpkg.com/@nylas/identity@latest"></script>
<style type="text/css">
body {
font-family: "Inter", sans-serif;
}
</style>
</head>
<body class="h-full">
<div class="grid h-full place-items-center">
<!-- Add the Nylas Scheduler Editor component -->
<nylas-scheduler-editor />
</div>
<!-- Configure the Nylas Scheduler Editor component -->
<script type="module">
class CustomIdentityRequestWrapper {
constructor(accessToken) {
this.accessToken = accessToken;
}
async request(args) {
try {
console.log('args', args);
const response = await fetch(`https://api.us.nylas.com/v3/grants/me/${args.path}`, {
method: args.method,
body: JSON.stringify(args.body),
headers: {
...args.headers,
'Authorization': `Bearer ${this.accessToken}`,
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
});
if (!response.ok) {
console.error(`Error: ${response.status} ${response.statusText}`);
return { error: `Error: ${response.status} ${response.statusText}` };
}
const data = await response.json();
return [data, null];
} catch (error) {
console.error('Fetch error:', error);
return { error: "Error" };
}
}
async currentUser() {
return {
id: 'idToken.sub',
email: 'user_email@example.com',
name: 'User Name',
provider: 'google',
};
}
async setDefaultAuthArgs(authArgs) {
return authArgs;
}
async authenticationUrl() {
return 'https://example.com/auth';
}
}
const schedulerEditor = document.querySelector("nylas-scheduler-editor");
schedulerEditor.schedulerPreviewLink = `${window.location.origin}/?config_id={config.id}`;
const accessToken = 'your_access_token_here';
// Create an instance of the CustomIdentityRequestWrapper class defined above
const nylasApiRequest = new CustomIdentityRequestWrapper(accessToken)
schedulerEditor.nylasApiRequest = nylasApiRequest
schedulerEditor.defaultSchedulerConfigState = {
selectedConfiguration: {
requires_session_auth: false, // Creates a public configuration which doesn't require a session
scheduler: { // The callback URLs to be set in email notifications
rescheduling_url: `${window.location.origin}/reschedule/:booking_ref`, // The URL of the email notification includes the booking reference
cancellation_url: `${window.location.origin}/cancel/:booking_ref`
},
},
};
</script>
</body>
</html>
Resources
Updated
Comments
0 comments
Please sign in to leave a comment.