azure-samples / ms-identity-javascript-react-spa Goto Github PK

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

The following doesn't make sense to me:

iii: Replace the string "Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here" with "https://login.microsoftonline.com/common/" (note: This is for multi-tenant applications located on the global Azure cloud. For more information, see the documentation).

iv: Replace the string "Enter_the_Redirect_Uri_Here" with the redirect uri you setup on AAD Portal.

Based on this I have set the authority to https://login.microsoftonline.com/common/http://localhost:19006/signed-in which looks wrong, can you show examples of what would be valid configuration?

Hey @salman90 !
This is Alex. How are you doing guys?

I'm looking for latest AAD sample for react. Is this one?

Nice to see you!

This issue is for a: (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Hoping someone can explain, but this sample works just fine when I create a new app registration and set the SPA Reply URL accordingly. However, we are trying to migrate an existing application, already in production, from ADAL to MSAL and when we add a SPA platform to that app registration, with the same reply URL, it's throwing the CORS error most of the time. Every now and then it will log me in correctly. I've seen it succeed after as few as 3 and after as many as 15 attempts though most of the time it fails until my account seemingly becomes locked/disabled for a period of time.

Is there something about older app registrations that render this sample unusable?

This issue is for a: (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Clone the repo and deployment to someone's domain
Create and Upload custom App to Microsoft Teams Desktop App
Try Sign-in with Popup or Sign-in with Redirect

Any log messages given by the failure

App webApplicationInfo or resource not defined in manifest

Expected/desired behavior

Can Sign-in with Popup or Sign-in with Redirect

OS and Version?

Microsoft Teams Desktop App on OS v1.5.00.4767

Versions

"@azure/msal-browser": "^2.22.0",
"@azure/msal-react": "^1.3.0",

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

This issue is for a

• bug report -> please search issues before submitting
• feature request
• documentation issue or request
• regression (a behavior that used to work and stopped in a new release)

Hi,is there a recommended/documented approach to mocking the MSAL instance used by the provider when writing unit tests?

e.g. If one was to write a minimal unit test of the <MainContent /> component in app.jsx that just tested whether the correct component was shown based on the authentication status. What would that look like?

Thanks in advance!

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Expected/desired behavior

I've combined the ad with my saas app. I've got it done via referring the code exapmle here. But the docs suggests that Use two Azure AD apps to improve security in production
. I'm a little confused how to do it. Is there another sample code? thanks

This issue is for a: (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

I followed the tutorial at https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react to add auth to a React app but the auth flow doesn't work. The app is on MS tenant, I tried both popup and redirect sign in.

"replyUrlsWithType": [
{
	"url": "http://localhost:3000",
	"type": "Spa"
},

Minimal steps to reproduce

• Create AAD app on MS tenant with SPA redirect URI http://localhost:3000
  ** Implicit grant ID Tokens
  ** Single tenant
• Download this repo and configure authConfig.js
• yarn install && yarn start
• Open Edge inPrivate window
• Go to http://localhost:3000
• Try to sign in with Redirect and Popup, neither work

Any log messages given by the failure

The request to fetch a token fails:

POST 'https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47/oauth2/v2.0/token'

{"error":"invalid_request","error_description":"AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type. Request origin: 'http://localhost:3000'.\r\nTrace ID: ...\r\nCorrelation ID: ...\r\nTimestamp: ...","error_codes":[9002326],"timestamp":"...","trace_id":"...","correlation_id":"...","error_uri":"https://login.microsoftonline.com/error?code=9002326"}

OS and Version?

MacOS Ventura 13, Edge

This issue is for a: (mark with an x)

- [X ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

1. down load zip file from azure AD

2. Console:
   NPM Install
   NPM Start

Results in Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10) 

Any log messages given by the failure

Expected/desired behavior

No Error

OS and Version?

Windows 10

Versions

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

Please provide us with the following information:

This issue is for a: (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)
- [X] question

Minimal steps to reproduce

The view of the app can be modified by using the <AuthenticatedTemplate> and <UnauthenticatedTemplate> tags, however what is the appropriate way to determine whether an authenticated user can go to certain pages or not. For example, I have been experimenting by using the following:

import React, { useEffect, useState } from "react";
import { 
  AuthenticatedTemplate, 
  UnauthenticatedTemplate,
  useAccount,
  useMsal,
} from "@azure/msal-react";

const Home = () => {
  const { instance, accounts, inProgress } = useMsal();
  const account = useAccount(accounts[0] || {});

  return (
      <div className="container-sm">
        <AuthenticatedTemplate>
          // Can also use ID 
          {account && account.name === "Test, User" && (
            <div>
              Hi There
            </div>
          )}
          {account && account.name !== "Test, User" && (
            <div>
              Nothing to see
            </div>
          )}
        </AuthenticatedTemplate>
        <UnauthenticatedTemplate>
          <h5 className="card-title">
            Please sign-in to see your profile information.
          </h5>
        </UnauthenticatedTemplate>
      </div>
  );
};

export default Home;

This does work as expected, but it seems like from a security standpoint, a bad idea because this check is happening on the client side. Should the list of "authorized" users be queried from the server side first and checked against that? Or does msal provide that kind of functionality? Either way, what would be the "appropriate" approach to implementing authorization based on the identity of the user? Thank you!

This issue is for a: (mark with an x)

- [ x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Clone, npm ci, follow setup instructions

Any log messages given by the failure

Access to fetch at 'https://developer.microsoft.com/graph' (redirected from 'https://graph.microsoft.com/') from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Expected/desired behavior

Get profile information

OS and Version?

Windows 10

I have tried using package.json proxy and manually setting up the proxy to no avail. What am I doing wrong?
https://create-react-app.dev/docs/proxying-api-requests-in-development/
https://www.npmjs.com/package/cors

---

Thanks! We'll be in touch soon.

Please provide us with the following information:

This issue is for a: (mark with an x)

- [√ ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Run the project→Sign in→Sign in using Popup→Sign Out

Any log messages given by the failure

none

Expected/desired behavior

After logging out, click Login to select other accounts to log in

OS and Version?

Windows 7, 8 or 10. Linux (which distribution). macOS (Yosemite? El Capitan? Sierra?)
Window 11

Versions

KB5009566

Mention any other details that might be useful

none

---

Thanks! We'll be in touch soon.