Sony Arouje

a programmer's log

Archive for the ‘React’ Category

React-Native library for Azure AD B2C

leave a comment »

Last couple of days I was spending my free time learning Azure Functions and Authentication of these functions. I was concentrating on Azure Active Directory B2C as my authentication provider. May be I will write another post detailing how to setup Azure AD B2C and configuring Azure Functions.

I could able to create access tokens and access my functions via postman. Next I wanted to create a react-native mobile app and try access the same function from it. I searched for libraries to enable AD B2C login, unfortunately I couldn’t find any. I tried MSAL js but will not work with react-native, as MSAL needs localStorage or sessionStorage to work and is not suitable for react-native world.

Fortunately I found a library which does Azure AD login. The work flow of Azure AD and AD B2C is almost same. So I decided to use Azure AD library and add Azure AD B2C functionality. I trim down the Azure AD library and removed the option to store the tokens. Caching of the token should be handled by the caller. This library will do the login flow and return back the tokens, it can also refresh the access_token using the refresh token flow.

Lets see how to use this library.

import B2CAuthentication from "../auth-ad-js/ReactNativeADB2C"; import LoginView from "../auth-ad-js/LoginView"; const CLIENT_ID = "<provide your client id>"; export default class LoginScreen extends React.Component { static navigationOptions = { title: "Login" }; render() { const b2cLogin = new B2CAuthentication({ client_id: CLIENT_ID, client_secret: "<key set in application/key>", user_flow_policy: "B2C_1_signupsignin", token_uri: "https://saroujetmp.b2clogin.com/saroujetmp.onmicrosoft.com/oauth2/v2.0/token", authority_host: "https://saroujetmp.b2clogin.com/saroujetmp.onmicrosoft.com/oauth2/v2.0/authorize", redirect_uri: "https://functionapp120190131041619.azurewebsites.net/.auth/login/aad/callback", prompt: "login", scope: ["https://saroujetmp.onmicrosoft.com/api/offline_access", "offline_access"] }); return ( <LoginView context={b2cLogin} onSuccess={this.onLoginSuccess.bind(this)} /> ); } onLoginSuccess(credentials) { console.log("onLoginSuccess"); console.log(credentials); // use credentials.access_token.. } }

Parameters passing to B2CAuthentication are the values I configured in Azure AD B2C. If the login succeeds then onLoginSuccess callback function will receive the tokens.

The library is hosted in git.

Advertisements

Written by Sony Arouje

February 7, 2019 at 4:13 pm

Posted in React

Tagged with ,

react, redux and cycle – Introduction

leave a comment »

Last couple of months we were working mostly in react js to develop a flexible platform for one of the product we are working. I am planning to make a couple of post to explain how to start developing in react with redux and cycle. To setup my dev environment, I used the react boilerplate created by my friend Sendhil. This is a basic template to jumbstart react js development with linting.

I am not going in depth of redux or redux-cycle, it’s just an attempt to help setup the initial phase of the development. If you are not familiar with redux or why we need redux, better learn it from the creator.

Let’s use the template and incrementally add more features to it. I created a new github repository with some initial code to start with.

Below are the new npm dependencies added to package.json

  • react-redux: "^5.0.4",
  • redux: "^3.6.0",
  • @cycle/http: "^13.3.0",
  • @cycle/run: "^3.1.0",
  • @cycle/time: "^0.8.0",
  • redux-cycles: "^0.4.1",
  • xstream: "^10.9.0",
  • prop-types: "^15.5.10"

For any redux application we need to setup a store. I created a store as well, see the code below.

import { applyMiddleware, createStore, compose } from 'redux'; import { createCycleMiddleware } from 'redux-cycles'; import { run } from '@cycle/run'; import { makeHTTPDriver } from '@cycle/http'; import { timeDriver } from '@cycle/time'; import logger from 'redux-logger'; // combined all the reducers in the application import reducers from './reducers'; // combined all the cycles in the application import cycles from './cycles'; //create cycle middleware to attach to redux store. const cycleMiddleware = createCycleMiddleware(); const { makeActionDriver, makeStateDriver } = cycleMiddleware; //we might use multiple middleware, here we used a logger //and cycle. We can add more middleware by adding them to //the below array. const middleWare = [ logger, cycleMiddleware, ]; const initState = {}; // more about compose here http://redux.js.org/docs/api/compose.html let composeEnhancers = compose; // adding redux dev tool to visualize the store state. // should be enabled only in development. if (process.env.NODE_ENV !== 'production') { const composeWithDevToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__; if (typeof composeWithDevToolsExtension === 'function') { composeEnhancers = composeWithDevToolsExtension; } } const store = createStore( reducers, // all the available reducers combined initState, // initial state of the reducers composeEnhancers( // adding store enchancers applyMiddleware(...middleWare), // attaching the middleware ), ); // calling cycle's run() we are activating the cycles that we created // here all the different cycles are combined to one. run(cycles, { ACTION: makeActionDriver(), STATE: makeStateDriver(), Time: timeDriver, HTTP: makeHTTPDriver(), }); export default store;

 

Added some inline comments to the code and hopefully it’s pretty self explanatory. Once we have the store created, we need to pass down the store to other components, so that they can access state or dispatch actions.

Let’s edit index.jsx and add the below code.

import React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; import store from './store/create-store'; import App from './App'; render( <Provider store={store}> <App /> </Provider> , document.getElementById('root'));

 

Great, we created a basic react app with redux. In next post I will cover how to create reducer and handle side effects using redux-cycle.

 

Happy coding…

Written by Sony Arouje

September 22, 2017 at 6:32 pm

Posted in JavaScript, React

Tagged with , ,

%d bloggers like this: