Hi friends. Nowadays, mobile applications are rarely standalone. They most often require a back-end with which they communicate. This back-end provides a means of storing, retrieving and processing data from any device which the app runs on. Taking this into consideration, it is obvious you will want to secure this data. This can be done by restricting access to the Back-end’s resources to trusted and identified users of your software. This is a common use case, and I think there is not enough documentation about implementing this with Asp.net core and Xamarin forms. So, I decided to make this blog post. Let’s talk about implementing social auth With Xamarin Forms and Asp.net core.

A fast and secure way to authenticate users of your system is to use social authentication providers like Google, Facebook… You might also want to implement email and password authentication alongside these, So don’t worry you are at the right place we will implement all 3.

Here is the source code for this tutorial.

If you like this post, don’t hesitate to follow me on Twitter or Github and subscribe to this page’s notifications to stay updated with new articles or like my page on Facebook.

How Social Authentication with a Back-end is Done

Basically, the Xamarin Forms mobile application will launch social authentication. This will cause the mobile web browser to be called, redirect to the social authentication provider. After the user enters his valid credentials, we redirect back to our app, passing the access token. This token can be used to access user information from the auth provider. We pass the token to the asp.net core API. The REST API will query the social auth provider’s server to validate that the token actually comes from them. This helps protect our software from attackers. When The back-end has the token validated by social authentication providers (Facebook, Google…). We then create a new JWT and send this to the user. It is with this token that all restricted API calls should be made.

This diagram illustrates clearly what we are trying to describe here:

Social Wuth With Xamarin Forms and ASP.net core schema
Social Auth With Xamarin Forms and ASP.net core Schema

Implementing Social Auth With Xamarin Forms and Asp.net core

To implement Social Auth With Xamarin Forms and Asp.net core, we have to first allow the client to authenticate via the social media and get an access token.

Step 1: Get the access token via the mobile app

Using Xamarin Forms, this is easy. You need to add Xamarin.Auth to all your projects (.Net standard and platform projects). Since there are already well documented examples for these, I will redirect you to the right resources and we will go straight to the point.

  • For Google authentication, follow carefully this guide. In case you have any issue, I added the troubleshooting guide at the end of the documentation.
  • For Facebook authentication, Create an app at “developers.facebook.com”. Then in the products tab (in the dashboard), select “Facebook Login” and add a redirect url this could be ” https://www.facebook.com/connect/login_success.html”. Then you can initiate facebook authentication as follows:

Using Xamarin.Auth, we created an object of type “OAuth2Authenticator”. This object has an event called ” Completed” which is called when authentication is done. We subscribe to this event. This event passes us an Access Token generated by either Facebook or Google. We will use this to signin to the API.

Step 2: Add JWT and Social Authentication to our Asp.Net core REST API

NB: In the source code of the asp.net core project, I use MongoDB as Identity provider. But you can easily modify that and change it to SQL server. In the back-end, we add JWT authentication normally.

  • In the Configure Services method

In the Configure Method

  • We create a controller called AccountController. Which will contain the methods to signin via Google, Facebook and email/password.
  • Both Google and Facebook signin actions are similar.

In other to validate the access token passed to the API, we create a FacebookAuthService and a GoogleAuthService. Both of them will be in charge of validating the access token they receive and creating the user inside the API.

This is shorter with Google thanks to the package ” Google.Apis.Auth” which saves us a lot of time.

After getting user information, and validating the access token, you need to create a new JWT token which will be sent back to the Client calling the API. We do so as follows:

Step 3: Signin in to the API via the mobile app

To signin, you just call the “SignInToAPI” method after Xamarin.Auth fires the event for completed authentication, do this only if authentication is successfull.

Step 4: Email and Password authentication

This part has nothing to do with social authentication. It is a bonus part which tells you how to implement email login and registration from the backend. To do so, you just need to leverage the SigninManager and the UserManager which you inject in the constructor. These will be in charge of managing user tasks related to authentication.

Conclusion

You should have implemented social authentication with the help of this tutorial and the source code on Github. To protect your API, add the [Authorize] attribute to the controllers and HTTP actions with restricted access. You will now need to pass a “bearer” token every time you make a web request to the controllers or methods of your API with the Authorize attribute.

You might be interested by this blog post too: Implementing Infinitescroll with the Xamarin Forms Collection View.

References

Image credit: https://medium.com/@blacksonic86/angular-2-authentication-revisited-611bf7373bf9

https://medium.com/mickeysden/react-and-google-oauth-with-net-core-backend-4faaba25ead0

https://medium.com/@ozgurgul/asp-net-core-2-0-webapi-jwt-authentication-with-identity-mysql-3698eeba6ff8

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/data-cloud/authentication/oauth

Follow me on social media and stay updated

5 comments

    • Damien Doumer

      Reply

      Hello, thanks for your interest in this post.
      By the time I wrote this article, the Asp.net core authentication with Xamarin you are talking about was not yet officially part of Xamarin Essentials.
      You came up with an important point. Using Xamarin Essentials is better than the former methods of authentication with Xamarin. I think I’ll make a new blog post about using that approach instead.

      • Paul Pfeiffer

        Reply

        Hey, thank you for your answer.
        I would love to see that blog!!
        I think there is also token refresh included, right?

        Kind regards

        • Damien Doumer

          Reply

          I guess they did include that in Xamarn.Essentials but I invite you to check cause I might be wrong.

        • Damien Doumer

          Reply

          Hello, I finally did a post + video about social auth with Xamarin Essentials Web authenticatot API. You can find it here, I hope you will find it usefull, if you do, please don’t forget to like and subscribe and hit the bell for more. 🙂 https://youtu.be/lVIcXVDmN_Y

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.