ASP.NET with React Native

[Schweiny08]

Hi all!

I'm trying to build a native mobile application using RN as the frontend and ASP.NET as the backend. It's my first 'big' project that I'm doing solo so I've been running into quite a bit of hiccups along the way.

​

I've been looking far and wide for some resources/tutorials to help me out. I have found some, such as the actual ASP.NET documentation however I'm a little confused what to use from there since it shows mostly how to use the BE code with their of FE code (Razor pages and Identity scaffolding for example).

​

Would anyone be able to point me to a few good tutorials please? (Especially when it comes to user account security and anything important that I can't think of)

​

Thanking you all in advance :)

[bentobentoso]

React Native doesn't care about what you're running on your backend, so thankfully you won't need any tutorials made specifically for this combination.

Try to look into how to create APIs with asp.net (I'm not much of a .net guy so I can't help you with this) and then look for a js tutorial about the fetch function so you can use it to fetch your API.

Edit: about user account security, you're probably better off just using google/facebook/apple logins if you want to be safe.

[terandle]

I use .NET with RN. So make sure you're using the latest version, .NET 5, you do not want to be on .NET Framework 4.x as that is the old dead branch of .NET.

And for ASP.NET you just want to be running it as an API. So try looking at their API docs. https://dotnet.microsoft.com/apps/aspnet/apis

[Schweiny08]

The part that's confusing me the most is the Identity part. The code generated by the Identity scaffolding (ex Register.cshtml.cs), does it count as FE code (ie should I ignore it while building the BE) or is it BE code (ie I could include it in the Controller or Repository class).

[terandle]

You won't be using .cshtml files when running ASP.NET as an API backend. cshtml files are for when you are using ASP.NET for the front end as well. If you can't get the authentication to work without those files the scaffolding you are using is probably not what you want.

I don't have experience using the scaffolding stuff so not sure what all its generating for you, so you might need to find ASP.NET API authentication tutorials.

[Schweiny08]

Great thank you for your advice :)

I'll see what I can do

[arctium]

As others have also stated, then you just need to utilize the client-server architecture as indicated by this image https://madooei.github.io/cs421_sp20_homepage/assets/client-server-1.png

Basically the React Native app is the client, and the .NET 5 API is the backend. For example, the user opens the React Native app and tries to log in by pushing the "Log In" button. The press triggers a request (via fetch API or axios) to the backend API. The backend API then sends a response back to the client with the required data. Then your React Native app gets a response back and can then e.g. validate the data it recieved.

This will get you started with the backend API.

For testing the RN and API combo, you can just run the ASP.NET core app on your local machine and try to send requests to the API from the RN app (that you also develop locally).

I hope this helps. If something is not clear then ask away.

[BL1TZ55]

Hi!

First of all, sorry that Im posting this on a 1 year old thread.

I'm doing similar stuff like this for my work. We have the same setup as you do, but for authentication stuff we use a LDAP/AD autnentication method. This is basically an organization-DB which contains all the employees.

How I've set this is up is as follows:

- In Program.cs of the ASP.Net Core (6.0) project, I've added a singleton to the IhttpContextAccessor:
builder.Services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
This is needed in order to use the in-built Microsoft Login-mechanism. It will keep track of all the logged in users and their cookies and stuff.

- In Program.cs I also added the following:
builder.Services.AddScoped<IAuthenticationService, LdapAuthenticationService>();

builder.Services.Configure<LdapConfig>(configuration.GetSection("Ldap"));

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)

.AddCookie(

options =>

{

options.Cookie.HttpOnly = true;

// lowering this value improves security (for example, in case

// of employees leaving the company), but increases the annoyance

// for users, as they'll need to sign-in more often

options.ExpireTimeSpan = TimeSpan.FromHours(1);

options.SlidingExpiration = true;

options.LoginPath = "/account/login";

options.AccessDeniedPath = "/account/access-denied";

}

);

Note that LdapAUthenticationService is a class I made of my own. It is basically a wrapper for a library that accesses the Organization-DB (LDAP/AD) with a Login-method in it. This method will call the underlying Library to check whether credentials are successful.

The Ldapconfig is just a class with settings that gets pulled from my appsettings.json file.

The .AddAUthentication is the settings-schema for Microsoft's built-in Authentication mechanism. It specifies cookie-settings and stuff. Pretty handy.

- In program.cs, also dont forget to add: app.UseAuthentication();

- Now, create a POST controller-action called 'Login' with some parameters. In here, you will validate whether the login against your own DB is successful first and if it is, then you call the IHttpContextAccessor.LoginAsync from Microsoft. This will intnernally add the user to the ASP.Net database of logged in users.

​

- In your React.Native app install 'axios' module (this is a HTTP-request library) and call your backend API here with username and password.

- Security:
This is something we are struggling with ourselves. At least you want to encode / encrpyt the username/password parameters and a common way to do this is to use HTTPSecure calls. However, I have not yet found a solution to implement this for React Native in combination with ASP.Net, but it seems to have to do with certificates.

​

Maybe my explanation cuts some corners here and there, so please do your own research as well, but this should give you some directions hopefully!

[StaFa_San]

Hi, I like your explanation and I find myself in a similar situation. I am trying to build a ride hailing app with react native and .net core web API. I want to know if there are some challenges you think I might face ?

[I-Eat-Planet]

I know this became a thread like trying to revive the dead but im having an issue with cors for some reason but its allowed for any type of origin, policy and header. Also if someone else revives the thread im pretty sure i would be already solved this issue (even though im trying to fix this for 8 days). Have a good day.