Essaywriter.college - Tutorial: Add Microsoft login button to React SPA - Azure

Provided by Alexa ranking, essaywriter.college has ranked N/A in N/A and 1,838,996 on the world. essaywriter.college reaches roughly 1,695 users per day and delivers about 50,846 users each month. The domain essaywriter.college uses a Commercial suffix and it's server(s) are located in N/A with the IP number 18.210.144.85 and it is a .college domain.

1. Set up development environment 1. Set up development environment Verify the following software is installed on your local computer. An Azure user account with an active subscription. . - installed to your local machine. or an equivalent IDE with Bash shell or terminal - installed to your local machine.2. Keep value for environment variable 2. Keep value for environment variable Set aside a place to copy your App registration's client ID value, such as a text file. You will get this client ID in step 5 of the next section. The value will be used as an environment variable for the web app.3. Create App registration for authentication 3. Create App registration for authentication Sign in to for the Default Directory's App registrations. Select + New Registration. Enter your app registration data using the following table: Field Value Description Name Simple Auth Tutorial This is the app name user's will see on the permission form when they sign in to your app. Supported account types Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts This will cover most account types. Redirect URI type Single Page Application (SPA) Redirect URI value http://localhost:3000 The url to return to after authentication succeeds or fails. Select Register. Wait for the app registration process to complete. Copy the Application (client) ID from the Overview section of the app registration. You will add this value to your environment variable for the client app later.4. Create React single page application for TypeScript 4. Create React single page application for TypeScript In a Bash shell, create a create-react-app using TypeScript as the language: npx create-react-app tutorial-demo-login-button --template typescript Change into the new directory and install the @azure/msal-browser authentication package: cd tutorial-demo-login-button && npm install @azure/msal-browser Create a .env file at the root level and add the following line: REACT_APP_AZURE_ACTIVE_DIRECTORY_APP_CLIENT_ID= The .env file is read as part of the create-react-app framework. This file is where you can store the client ID for local development. Copy your Application (client) ID into the value.5. Add login and logoff buttons 5. Add login and logoff buttons Create a subfolder named azure, for the Azure-specific files, within the ./src folder. Create a new file for authentication configuration in the azure folder, named azure-authentication-config.ts and copy in the following code: import { Configuration, LogLevel } from "@azure/msal-browser"; const AzureActiveDirectoryAppClientId: any = process.env.REACT_APP_AZURE_ACTIVE_DIRECTORY_APP_CLIENT_ID; export const MSAL_CONFIG: Configuration = { auth: { clientId: AzureActiveDirectoryAppClientId, }, cache: { cacheLocation: "sessionStorage", storeAuthStateInCookie: false, }, system: { loggerOptions: { loggerCallback: (level, message, containsPii) => { if (containsPii) { return; } switch (level) { case LogLevel.Error: console.error(message); return; case LogLevel.Info: console.info(message); return; case LogLevel.Verbose: console.debug(message); return; case LogLevel.Warning: console.warn(message); return; } }, }, }, }; This file reads your application ID in from the .env file, sets session as the browser storage instead of cookies, and provides logging that is considerate of personal information. Create a new file for the Azure authentication middleware in the azure folder, named azure-authentication-context.ts and copy in the following code: import { PublicClientApplication, AuthenticationResult, AccountInfo, EndSessionRequest, RedirectRequest, PopupRequest, } from "@azure/msal-browser"; import { MSAL_CONFIG } from "./azure-authentication-config"; export class AzureAuthenticationContext { private myMSALObj: PublicClientApplication = new PublicClientApplication( MSAL_CONFIG ); private account?: AccountInfo; private loginRedirectRequest?: RedirectRequest; private loginRequest?: PopupRequest; public isAuthenticationConfigured = false; constructor() { // @ts-ignore this.account = null; this.setRequestObjects(); if (MSAL_CONFIG?.auth?.clientId) { this.isAuthenticationConfigured = true; } } private setRequestObjects(): void { this.loginRequest = { scopes: [], prompt: "select_account", }; this.loginRedirectRequest = { ...this.loginRequest, redirectStartPage: window.location.href, }; } login(signInType: string, setUser: any): void { if (signInType === "loginPopup") { this.myMSALObj .loginPopup(this.loginRequest) .then((resp: AuthenticationResult) => { this.handleResponse(resp, setUser); }) .catch((err) => { console.error(err); }); } else if (signInType === "loginRedirect") { this.myMSALObj.loginRedirect(this.loginRedirectRequest); } } logout(account: AccountInfo): void { const logOutRequest: EndSessionRequest = { account, }; this.myMSALObj.logout(logOutRequest); } handleResponse(response: AuthenticationResult, incomingFunction: any) { if(response !==null && response.account !==null) { this.account = response.account; } else { this.account = this.getAccount(); } if (this.account) { incomingFunction(this.account); } } private getAccount(): AccountInfo | undefined { console.log(`loadAuthModule`); const currentAccounts = this.myMSALObj.getAllAccounts(); if (currentAccounts === null) { // @ts-ignore console.log("No accounts detected"); return undefined; } if (currentAccounts.length > 1) { // TBD: Add choose account code here // @ts-ignore console.log( "Multiple accounts detected, need to add choose account code." ); return currentAccounts[0]; } else if (currentAccounts.length === 1) { return currentAccounts[0]; } } } export default AzureAuthenticationContext; This file provides the authentication to Azure for a user with the login and logout functions. Create a new file for the user interface button component file in the azure folder, named azure-authentication-component.tsx and copy in the following code: import React, { useState } from "react"; import AzureAuthenticationContext from "./azure-authentication-context"; import { AccountInfo } from "@azure/msal-browser"; const ua = window.navigator.userAgent; const msie = ua.indexOf("MSIE "); const msie11 = ua.indexOf("Trident/"); const isIE = msie > 0 || msie11 > 0; // Log In, Log Out button const AzureAuthenticationButton = ({ onAuthenticated }: any): JSX.Element => { // Azure client context const authenticationModule: AzureAuthenticationContext = new AzureAuthenticationContext(); const [authenticated, setAuthenticated] = useState<Boolean>(false); const [user, setUser] = useState<AccountInfo>(); const logIn = (method: string): any => { const typeName = "loginPopup"; const logInType = isIE ? "loginRedirect" : typeName; // Azure Login authenticationModule.login(logInType, returnedAccountInfo); }; const logOut = (): any => { if (user) { onAuthenticated(undefined); // Azure Logout authenticationModule.logout(user); } }; const returnedAccountInfo = (user: AccountInfo) => { // set state setAuthenticated(user?.name ? true : false); onAuthenticated(user); setUser(user); }; const showLogInButton = (): any => { return ( <button id="authenticationButton" onClick={() => logIn("loginPopup")}> Log in </button> ); }; const showLogOutButton = (): any => { return ( <div id="authenticationButtonDiv"> <div id="authentication"> <button id="authenticationButton" onClick={() => logOut()}> Log out </button> </div> </div> ); }; const showButton = (): any => { return authenticated ? showLogOutButton() : showLogInButton(); }; return ( <div id="authentication"> {authenticationModule.isAuthenticationConfigured ? ( showButton() ) : ( <div>Authentication Client ID is not configured.</div> )} </div> ); }; export default AzureAuthenticationButton; This button component logs in a user, and passes back the user account to the calling/parent component. The button text and functionality is toggled based on if the user is currently logged in, captured with the onAuthenticated function as a property passed into the component. When a user logs in, the button calls Azure authentication library method, authenticationModule.login with returnedAccountInfo as the callback function. The returned user account is then passed back to the parent component with the onAuthenticated function. Open the ./src/App.tsx file and replace all the code with the following code to incorporate the Login/Logout button component: import React, { useState } from "react"; import AzureAuthenticationButton from "./azure/azure-authentication-component"; import { AccountInfo } from "@azure/msal-browser"; function App() { // current authenticated user const [currentUser, setCurrentUser] = useState<AccountInfo>(); // authentication callback const onAuthenticated = async (userAccountInfo: AccountInfo) => { setCurrentUser(userAccountInfo); }; // Render JSON data in readable format const PrettyPrintJson = ({ data }: any) => { return ( <div> <pre>{JSON.stringify(data, null, 2)}</pre> </div> ); }; // Quick link - user revokes app's permission const ShowPermissionRevokeLinks = () => { return ( <div> <div><a href="https://myapps.microsoft.com" target="_blank" rel="noopener">Revoke AAD permission</a></div> <div><a href="https://account.live.com/consent/manage" target="_blank" rel="noopener">Revoke Consumer permission</a></div> </div> ); }; return ( <div id="App"> <h2>Microsoft Login Button application</h2> <AzureAuthenticationButton onAuthenticated={onAuthenticated} /> {currentUser && ( <div> <PrettyPrintJson data={currentUser} /> <ShowPermissionRevokeLinks /> </div> )} </div> ); } export default App; After a user logs on, and the authentication redirects back to this app, the currentUser object is displayed.6. Run React SPA app with login button 6. Run React SPA app with login button At the Visual Studio Code terminal, start the app: npm run start Watch the VSCode integrated for the notice that the app is completely started. Compiled successfully! You can now view js-e2e-client-azure-login-button in the browser. Local: http://localhost:3000 On Your Network: http://x.x.x.x:3000 Note that the development build is not optimized. To create a production build, use yarn build. Open the web app in a browser, http://localhost:3000. Select the Login button in the web browser. Select a user account. It doesn't have to be the same account you used to access the Azure portal, but it should be an account that provides Microsoft authentication. Review the pop-up showing the 1) user name, 2) app name, 3) permissions you are agreeing to, and then select Yes. Review the user account information. Select the Logout button from the app. The app also provides convenient links to the Microsoft user apps to revoke permissions.7. Store application-specific user information 7. Store application-specific user information Optionally, you can store the user ID in your own application database to correlate between the Microsoft provider identity and the user's data required in your own application. The contains two IDs you may want to keep track of are: sub: The ID that is specific to the user, for your specific Active Directory app ID. This is the ID you should store in your own application database, if you need to correlate your custom app's data to your Microsoft Identity provider user. oid: This is the universal user ID across all apps in the Microsoft Identity provider. Store this value if you need to track your user across several apps in the Identity provider.8. Clean up resources 8. Clean up resources When you are done using this tutorial, delete the application from the Azure portal . If you want to keep the app but revoke the permission given to the app by your specific user account, use one of the following links:

Keywords on this domain

Search Results related to essaywriter.college on Search Engine

Alexa Rank

Vistor via Country

Alexa Traffic Graph

SEOquake Zone

Mini site formation by Alexa Rank

DNS Record

Hosting and Whois Zone