The React Native Client for the Contacts application of the 'Coding with JoeG' stream.
You will need to have Node.js and React Native installed and working.
This also assumes that you are using the Contacts Api so that the applications can interact with the contacts.
Open up a command prompt in the Contacts
folder and execute the following command to install all of the required node modules
yarn install
Run the Web API locally. This should be configured to execute at https://localhost:5001
You will also need to create a file in the Contacts\msal
folder names msalconfig.ts
. This file contains the Microsoft Identity configuration. The file should contain the follow
const MsalConfig = {
config: {
// b2c configuration
auth: {
clientId: "", // TODO: Replace with your client id
authority: "https://login.microsoftonline.com/common",
redirectUri: "http://localhost:19006/Auth",
navigateToLoginRequestUrl: false,
validateAuthority: false
},
cache: {
cacheLocation: "sessionStorage" // session storage is more secure, but prevents single-sign-on from working. other option is 'localStorage'
} as const
},
// this is marked as the default, as the scopes for individual pages may be different
// TODO: Replace these scopes with the scopes for your API.
defaultRequestConfiguration: {
scopes: ["api://dc68a11f-d265-4e9c-8a24-abbbd3520f8a/Contacts.Delete",
"api://dc68a11f-d265-4e9c-8a24-abbbd3520f8a/Contacts.List",
"api://dc68a11f-d265-4e9c-8a24-abbbd3520f8a/Contacts.Save",
"api://dc68a11f-d265-4e9c-8a24-abbbd3520f8a/Contacts.Search",
"api://dc68a11f-d265-4e9c-8a24-abbbd3520f8a/Contacts.View"]
}
}
export default MsalConfig;
Once configured, you should be able to run
yarn web
to run the application.
This sample was built on the stream 'Coding with JoeG'. Here are some of the videos for it.
- React Native
- OpenAPI Tools OpenAPI Generator
- How to automate API code generation (OpenAPI/Swagger) and boost productivity
- Using Axios with React to Make API Requests
- React Native Dev Tools
- JP Dandison, aka @AzureAndChill Axios Intercept with Microsoft Identity Library for JavaScript MSAL.js
- React Native Elements - Getting Started