React Native Client for Contacts

The React Native Client for the Contacts application of the 'Coding with JoeG' stream.

Prerequisites

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.

Running the samples

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.

Stream

This sample was built on the stream 'Coding with JoeG'. Here are some of the videos for it.

• Video: Introduction to React Native
• Video: Building the API Client and Authentication

References

• 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