msgraph-helpers.ts calls /auth on my own app - 404

[beckybertram]

I have generated a Word add-in using the js template with SSO. In msgraph-helper.ts where it does as GET operation on URL /auth, it keeps trying to call /auth on my own application and gets a 404 error. I don't see any /auth in my dist folder.

In fiddler: the GET operation is {Azure static web site URL}/auth?_=1618953646524

Registered app permissions using "npm run configure-sso". Only change I made was to make the app single-tenant. (I updated the endpoint in my code accordingly so msalConfig authoring points to tenant id instead of common.) I also changed the scopes for Graph authorizations but they are authorized.

This seems to be the same issue as https://github.com/OfficeDev/generator-office/issues/568.

I have spent hours and hours trying to figure this out. Thanks for your help!

[PaulAndLobo]

I am also seeing this. It does not happen from the Microsoft sample, but it happened when I attempted to integrate the same code into an AddIn I've been working on for several months.

[beckybertram]

Any update on this? I see the status is set to triaged by @LouMM but there has been no movement on this. Any idea on a fix?

[PaulAndLobo]

I've gotten nowhere with the AddIn, but have gotten a proof-of-concept SPA working with the MSAL javascript library, talking to our backend REST API (.NET Core on Azure with controllers and such), so I'm thinking it should be relatively straightforward to get an AddIn working.

[PaulAndLobo]

It is trying to load the /auth page from the local Express Server. If you add routing for that, it should work. In my case, I'm able to skip this step... I only need the bootstrap token, which I was able to get from the call to OfficeRuntime.auth.getAccessToken. I pass the bootstrap token as a Bearer Token in the auth header to my Rest API, which is all I need for now.

[beckybertram]

Hmm. Do you have a code sample you could share of how you did this?

[PaulAndLobo]

Here is the relevant part of the method (hacked up from the Microsoft sample). Note that it returns the so-called bootstrap token:

export async function getGraphData(): Promise { console.log("getGraphData()"); try { let bootstrapToken: string = await OfficeRuntime.auth.getAccessToken({ allowSignInPrompt: true, allowConsentPrompt: true }); console.log("return from getAccessToken() " + bootstrapToken);

return bootstrapToken;

} catch (exception) {

The call site where this method is called:

onSsoLogin() { getGraphData().then(token => { LoginDataAccess.getUser(token) .then(response => response.json()) .then(json => this.validateLogin(json)); });

console.log("onSsoLogin FINIS");

}

The LoginDataAccess.getUser method:

export class LoginDataAccess extends DataAccess { public static getUser(token: string) { let url = DataAccessConstants.RestApiUrlPrefix + "login"; return fetch(url, { method: "GET", headers: DataAccess.getFetchHeadersWithAuth(token) }); }

The getFetchHeadersWithAuth method:

static getFetchHeadersWithAuth(token: string) { var result = new Headers(); result.append("Content-Type", "text/json"); result.append("Authorization", Bearer ${token}); return result; }

And the Rest API that it calls is in .NET CORE hosted in Azure. I used the template for building a vanilla REST API.

[PaulAndLobo]

So the above is the abbreviated version that doesn't call MSGraph, for example, to get user info such as email. Rather, I pick apart the token over on the server side. For example, the email address is used to look up a user in the database. And one nice thing about this, is we no longer need to store passwords in the DB, because we'll be protecting all our API methods with the [Authorize] directive, etc., which requires the user has already been authenticated by the system, hence the token.

Anyway, if you want to use the /auth URL, I think you'd set up an Express route or routes at the beginning of your client side app. You can see it being done if you go to the folder "node_modules\office-addin-sso\src" and look at the file "app.ts"... I think the following line (with whatever else you need to set it up) does it:

    this.appInstance.use('/auth', authRouter.router);

[PaulAndLobo]

And hah! I just realized the function name "getGraphData" is now a misnomer since it doesn't call MsGraph :^)

[millerds]

The sso template has been significantly revamped for better security. Please use the new template.