All Projects → stashenergy → react-native-msal

stashenergy / react-native-msal

Licence: MIT license
MSAL for React Native

Programming Languages

typescript
32286 projects
java
68154 projects - #9 most used programming language
objective c
16641 projects - #2 most used programming language
javascript
184084 projects - #8 most used programming language
Starlark
911 projects
ruby
36898 projects - #4 most used programming language

Projects that are alternatives of or similar to react-native-msal

ms-identity-mobile-apple-swift-objc
An iOS sample in Swift that authenticates Microsoft Account and Azure AD users and calls the Graph API using OAuth 2.0
Stars: ✭ 61 (-1.61%)
Mutual labels:  microsoft, azure-active-directory, msal
ms-identity-javascript-tutorial
A chapterwise tutorial that will take you through the fundamentals of modern authentication with Microsoft identity platform in Vanilla JavaScript.
Stars: ✭ 100 (+61.29%)
Mutual labels:  azure-active-directory, msal, azure-active-directory-b2c
react-microsoft-login
Microsoft services authorization with React.
Stars: ✭ 65 (+4.84%)
Mutual labels:  microsoft, msal
ms-identity-javascript-react-tutorial
A chapterwise tutorial that will take you through the fundamentals of modern authentication with Microsoft identity platform in React using MSAL React
Stars: ✭ 100 (+61.29%)
Mutual labels:  azure-active-directory, msal
script-samples
A sample gallery of scripts to manage all things Microsoft 365.
Stars: ✭ 56 (-9.68%)
Mutual labels:  microsoft, azure-active-directory
active-directory-android
An android app that uses Azure AD and the ADAL library for authenticating the user and calling a web API using OAuth 2.0 access tokens.
Stars: ✭ 33 (-46.77%)
Mutual labels:  microsoft, azure-active-directory
active-directory-b2c-javascript-hellojs-singlepageapp
A single page app, implemented with an ASP.NET Web API backend, that signs up & signs in users using Azure AD B2C and calls the web API using OAuth 2.0 access tokens.
Stars: ✭ 63 (+1.61%)
Mutual labels:  microsoft, azure-active-directory
smovie-expo
[New] New version with more examples: https://github.com/theo-mesnil/WhatToWatch [Old version] Smovie is the simplest and fastest way to discover movies, series and actors. With React Native, Expo and themoviedb 🎥
Stars: ✭ 19 (-69.35%)
Mutual labels:  expo
react-native-news-app
Get breaking news headlines with short description filtered by your interests and country preferences
Stars: ✭ 75 (+20.97%)
Mutual labels:  expo
NanoSoft
A forum system built using plain php dedicated for C#.NET Developers
Stars: ✭ 20 (-67.74%)
Mutual labels:  microsoft
app-intro-lottie-expo
App Intro component with Expo, styled-components and Lottie
Stars: ✭ 46 (-25.81%)
Mutual labels:  expo
Microsoft365
Manage Microsoft 365 with PowerShell
Stars: ✭ 30 (-51.61%)
Mutual labels:  microsoft
libemf2svg
Microsoft (MS) EMF to SVG conversion library
Stars: ✭ 75 (+20.97%)
Mutual labels:  microsoft
maker
Maker is a advanced mobile ToDo app for Android and iOS
Stars: ✭ 35 (-43.55%)
Mutual labels:  expo
powerquery-parser
A parser for the Power Query / M formula language, written in TypeScript
Stars: ✭ 79 (+27.42%)
Mutual labels:  microsoft
WinActive
WinActive is a simple KMS Activator for Microsoft Windows/Office/VisualStudio VL Products!
Stars: ✭ 38 (-38.71%)
Mutual labels:  microsoft
RN-Book-Search
A Book search app using Expo (React Native) and Google Books API
Stars: ✭ 29 (-53.23%)
Mutual labels:  expo
BingMapsSDSToolkit
This toolkit makes it easy to use the Bing Maps Spatial Data Services (SDS) in .NET
Stars: ✭ 39 (-37.1%)
Mutual labels:  microsoft
expo-ui-kit
expo-ui-kit - a components based React-Native UI Kit
Stars: ✭ 88 (+41.94%)
Mutual labels:  expo
ferrisetw
Basically a KrabsETW rip-off written in Rust
Stars: ✭ 22 (-64.52%)
Mutual labels:  microsoft

react-native-msal

npm latest version npm beta version ci status semantic-release

Live Demo (Web)

https://stashenergy.github.io/react-native-msal/

Table of Contents

Install

Requires React Native >=0.61

Stable version: $ yarn add react-native-msal

Beta version: $ yarn add react-native-msal@beta

Don't forget to run npx pod-install after!

Setup

Expo

Follow the Expo setup guide

Non-expo

Follow the Android setup guide and the iOS setup guide

Use

import PublicClientApplication from 'react-native-msal';
import type { MSALConfiguration /*, etc */ } from 'react-native-msal';

const config: MSALConfiguration = {
  auth: {
    clientId: 'your-client-id',
    // This authority is used as the default in `acquireToken` and `acquireTokenSilent` if not provided to those methods.
    // Defaults to 'https://login.microsoftonline.com/common'
    authority: 'https://<authority url>',
  },
};
const scopes = ['scope1', 'scope2'];

// Initialize the public client application:
const pca = new PublicClientApplication(config);
try {
  await pca.init();
} catch (error) {
  console.error('Error initializing the pca, check your config.', error);
}

// Acquiring a token for the first time, you must call pca.acquireToken
const params: MSALInteractiveParams = { scopes };
const result: MSALResult | undefined = await pca.acquireToken(params);

// On subsequent token acquisitions, you can call `pca.acquireTokenSilent`
// Force the token to refresh with the `forceRefresh` option
const params: MSALSilentParams = {
  account: result!.account, // or get this by filtering the result from `pca.getAccounts` (see below)
  scopes,
  forceRefresh: true,
};
const result: MSALResult | undefined = await pca.acquireTokenSilent(params);

// Get all accounts for which this application has refresh tokens
const accounts: MSALAccount[] = await pca.getAccounts();

// Retrieve the account matching the identifier
const account: MSALAccount | undefined = await pca.getAccount(result!.account.identifier);

// Remove all tokens from the cache for this application for the provided account
const success: boolean = await pca.removeAccount(result!.account);

// Same as `pca.removeAccount` with the exception that, if called on iOS with the `signoutFromBrowser` option set to true, it will additionally remove the account from the system browser
const params: MSALSignoutParams = {
  account: result!.account,
  signoutFromBrowser: true,
};
const success: boolean = await pca.signOut(params);

B2C Applications

The PublicClientApplication class is a bit too bare bones for dealing with a B2C application, and you will need to write a bit of code to get the desired behavior.

To address this issue, the example app that is included in this repository includes a B2CClient class which contains a lot of the functionality you will need for a B2C app. You can copy this class right into your own React Native app and modify it to your liking. You can see it being used in the example's App.tsx

If you would like to see this class included in the library itself, please let us know.

Example App

As mentioned above, the example app demonstrates a B2C implementation

To run the example locally, first clone the repo and run $ yarn to bootstrap the project. Then run the following for the desired platform:

iOS: $ yarn example ios Android: $ yarn example android Web: $ yarn example web (the example app is also running live here)

If you want to run the example using your own Azure application information:

  1. Register the redirect URLs in your tenant:
    • Android: msauth://com.example/Xo8WBi6jzSxKDVR4drqm84yr9iU%3D
    • iOS: msauth.com.example://auth
    • Web (SPA): http://localhost:19006
  2. Update the b2cConfig and b2cScopes variables in msalConfig.ts with your details.

Migrating between major versions

See migration instructions in the CHANGELOG.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].