Is there a reason my Figma Embed API responds with "Unauthorised"?

I am trying to integrate a Figma prototype into an angular app and I need to use the Figma Embed API to track specific data like paths followed and user clicks. I have followed the Oauth steps and set up an Oauth app on my Figma account and I have specified the allowed origins as follows: (my app is served on localhost:4200)

• https://localhost
• https://localhost:4200
• http://localhost:4200
• http://localhost

I have made sure to append the client ID of the Oauth app to the iframe code.

I have also tried setting the share link of the Figma file and the prototype to view access for "anyone with the link", but I keep getting these errors in console and receive no messages from the embed api whatsoever:

Uncaught (in promise) v: XHR for "/api/user/state" failed with status 401


and

401 Unauthorized for GET: https://www.figma.com/api/user/state?redact=org_billing_data&team_id=[teamID]


and

401 Unauthorised for GET: https://www.figma.com/api/user/state?team_id=[teamID]&omit_core_data=1&file_key=[fileKey]


This is the embed code:

<iframe
id="my-frame"
#myFrame
[height]="iFrameHeight"
[width]="iFrameWidth"
[src]='figmaEmbedUrl'
allowfullscreen
></iframe>
***
constructor(
private sanitizer: DomSanitizer,
private figmaService: FigmaService,
) {
this.setUrlParams();
const rawUrl = this.constructUrl();
this.figmaEmbedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
console.log("Figma url: ", this.figmaEmbedUrl);}

setUrlParams() {this.urlParams = `${this.startPageId !== '' ? 'page-id=' + this.startPageId + '&' : ''}node-id=${this.startNodeId}&embed-host=share&footer=${this.showFooter}&viewport-controls=${this.showViewportControls}&show-proto-sidebar=${this.showSidebar}&hotspot-hints=${this.showHotspotHints}&device-frame=${this.showDeviceFrame}&scaling=${this.scaling}&content-scaling=${this.contentScaling}`;
console.log("URL params: ", this.urlParams);}

constructUrl() {
return `https://embed.figma.com/${this.linkType}/${this.fileKey}/${this.projectName}?${this.urlParams}&client-id=${this.clientId}`;}

Continue reading...