I have developed Angular, express js web application with JWT authentication. Now I need to develop react native mobile app for the same purpose as a web application. How can I add authentication for react native app. should it need to use JWT for the react native app or are there any other authentication techniques for the mobile application. I'm new to react native as well as mobile app development. Give me some recommended guides for react native and express js back-end development. Both web application and mobile application has the same database implemented using MSSQL.
You can of course use the JWT strategy.
I suggest you to use the AsyncStorage to store your token or any other data.
https://reactnative.dev/docs/asyncstorage
For the authentication you could create an AuthenticationContext where to provide all the functions and logic you need for the authentication.
Inside the context you could have function to login and to logout, a function to store the user in the AsyncStorage, a function to remove the user from the AsyncStorage, a function to determine whether the user is authenticated and other logic according to your needs.
Related
I need to implement the Single Sign on with Azure AD B2C. One of our application is developed in Blazor and other is developed in React JS.
Once user logged in Blazor app and then come to React JS app, he should be directly logged in without entering the credentials.
Thanks
Multiple Blazor app are able to work with SSO, but not the React JS app.
If your requirement is only specific to Azure AD/ Microsoft SSO then you can use Microsoft Authentication Library for React (msal-react).The library will be useful for React or JS based client application to authenticate using Azure AD.
Refer this for more information-
https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-react
I understand that passport.js is a way to implement app server side authentication, but if I am using Auth0 as the authentication service for my React app, do I still need passport.js?
You can authenticate users in a React app with auth0-react without other libraries such as passport.js. See Auth0 React SDK Quickstarts.
We are in the process of setting up a project that requires mobile and web app authentication and were wondering if there are any best practices for implementation.
For the backend we are currently using django rest framework with a knox token authentication and for the web frontend react.js. For the future, there will be a mobile app in react native.
We want to set up the authentication now so that it supports the react native mobile app in the future. However, I have seen that Knox authentication does not work for mobile apps straight forward as it uses csrf token.
So I'm wondering if there are any best-practices for mobile app and web authentication that specifically feature good documentation, multi-device login and smooth extensibility of login options (fb, google etc) for the current setup drf and react.js/react native.
I'm grateful for any guiding hints.
AWS Cognito seems to be a solution to your problem:
Typically, your users get tokens via an external UI provided by amazon (not really customizable) or by calling the Auth API within your React UI.
Cognito sends access_token, id_token and refresh_token to your react app. You need to pass the access_token to your drf backend (similar to knox token authentication) and validate it again via amazon.
Check out the official docs for React, check out this tutorial for django (it helped me a lot!).
I have a backend admin panel created in Laravel 8, and i have installed passport security also. Admin frontend is working on vuejs by using laravel frontend scaffolding.
I have another one website in react js and one mobile application in React Native. The api to the web and mobile application is from laravel admin application. So what my doubt is, when i use external react js application what are the grand types should i use for authorization. And how will i segregate api routes for login user data and common data to the external react application.
Anyone can help me to get into the track.
Thanks in advance.
I have some trouble understanding the MSAL authentication and authorization. I have a single page app developed in React. I have setup the MSAL Azure SSO authentication by registering the web app on the Azure AD. Now, I have a Web API (in .Net Core) which is running on a separate app service. How do I integrate the authentication from my React app to the Web API?
Few questions coming to mind:
Do I have to register the Web API app as well similar to my React app?
Do I have to pass the auth token from my React App to the Web API?
Do I have to setup the authentication only on the Web API side (using MSAL.Net) and the React App will connect to it?
Please share your thoughts. Let me know if I can explain any better.
If you are the author of both react app and web API, you can register just one app and use ClientId for both.
Yes. If your react app is standalone app (not a part of Asp.net app) you can use msal.js to login with AzureAD and then use openId token to login to your web API. Also you can use access token to access services secured by Azure (e.g. Microsoft Graph) directly from React.
If your React app is a part of Asp.net app, you can setup Auth on server. If it's standalone app you need to use approach from 2.
If your React app is standalone app and if you are going to access "downstream" API (like Microsoft Graph) from Web API, you need to implement On-Behalf-Of mechanism on your Web API. In two words:
- user login with React app and access Web API with openId token;
- Web API acquires new access token based on token sent from client
- Web API access Microsoft Graph with this new access token.
You can find Server side example here.
Client side example from another answer works in this case, but you need to send row openId to Web API instead on access token.
P.S. You can use access token instead of idToken to access your WebAPI as well, but in this case you need to define separate scope for your WebAPI in Azure as well. After that you can use this scope to access your WebAPI and separate set of scopes to access MS Graph.
Here is a complete video tutorial and source code on how to use MSAL with React to call Microsoft Graph.
The only different in your case will be that instead of calling Microsoft Graph, you will call your own API.
Bottomline is - there is no direct integration package yet for react. Which can also be read from the official statement on the msal-js repo:
After our current libraries are up to standards, we will begin
balancing new feature requests, with new platforms such as react and
node.js.
See Here. It allows you to call Graph API from client side.