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

Question

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

EDIT: This and this is the setup in my Figma dashboard for the OAuth app

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}`;}

Answer 1

I believe you need to verify if the clientId is actually valid ( this.client_id ), and then you need to be sure to add the origin from which you are requesting the embed is included in the oAuth origins that you created in the Figma dashboard.

• Stefan van Beek: as per my post, I have ensured to copy the correct client ID from my Figma dashboard and I have added the necessary localhost origins in the allowed embed origins.