NOTE: This post is now over 3 years old. I strongly suggest you use something else, like Auth0 or some other authentication solution. I am no longer maintaining this code, so it probably won't work anymore.

For my first Xamarin.Forms post, I thought I'd share something that I've seen some other folks struggling with:
getting an OAuth2 authentication process to work with Xamarin.Forms.

You don't have to use the Xamarin.Auth component from the Xamarin Component Store, but I don't see why you wouldn't want to. It's a nicely designed component (by Xamarin) that lets you perform OAuth2 authentication with any properly configured provider, like Facebook, Google, Instagram, etc.

UPDATE!

There is now source for this out on Github:
https://github.com/jsauve/OAuthTwoDemo.XForms

What do I need?

1. A Xamarin.Forms PCL project. This will be your app "core".

2. One or more Xamarin platform projects, such as iOS, Android, or Windows Phone.

3. The Xamarin.Auth component added to each of your platform projects. You can add it as a Xamarin component, a NuGet package, or from source.

Some assumptions:

For the sake of this sample, we'll assume that this app will start with only two screens:

1. A profile screen to display user info for whatever service you're authenticating with (Facebook, Instagram, Google+, etc).

2. A login screen for authenticating your users.

I'm also assuming that you have at least a little bit of experience with OAuth2.

Let's get started:

Let's start with the core of the app, the Xamarin.Forms PCL project. Your App class will look something like this:

namespace OAuth2Demo.XForms
{
	public class App
	{
    	static NavigationPage _NavPage;
    	
		public static Page GetMainPage ()
		{
			var profilePage = new ProfilePage();

			_NavPage = new NavigationPage(profilePage);

			return _NavPage;
		}

		public static bool IsLoggedIn {
			get { return !string.IsNullOrWhiteSpace(_Token); }
		}

		static string _Token;
		public static string Token {
			get { return _Token; }
		}

		public static void SaveToken(string token)
		{
			_Token = token;
		}
        
        public static Action SuccessfulLoginAction
        {
            get {
                return new Action (() => {
                    _NavPage.Navigation.PopModalAsync();
                });
            }
        }
	}
}

The first thing to notice is the GetMainPage() method. This tells the app which screen it should load first upon launching.

We also have a simple property and method for storing the Token that is returned from the auth service, as well as a simple IsLoggedIn property.

There's an Action property as well; something I stuck in here in order to have a way for the platform implementations to perform a Xamarin.Forms navigation action. More on this later.

You'll also notice some red in your IDE because we haven't created the ProfilePage class yet. So, let's do that.

Create a very simple ProfilePage class in the Xamarin.Forms PCL project. We're not even going to do anything fancy with it because that will depend on your particular need. For the sake of simplicity in this sample, it will contain a single label:

namespace OAuth2Demo.XForms
{
	public class ProfilePage : BaseContentPage
	{
		public ProfilePage ()
		{
			Content = new Label () {
				Text = "Profile Page", 
				VerticalOptions = LayoutOptions.CenterAndExpand,
				HorizontalOptions = LayoutOptions.CenterAndExpand, 
			};
		}
	}
}

Again, you'll probably have some red in your IDE because we seem to be missing the BaseContentPage class. The sole purpose of the BaseContentPage class is to ensure that none of the app's screens can be displayed until the user has logged in. (In this simplified demo, we're just persisting the user info to memory, so you'll need to re-login every time the app is run. In a real-world app, you'd be storing the authenticated user info to the device's keychain, which would eliminate the need to login at each app start.)

Create a BaseContentPage class in the Xamarin.Forms PCL project:

namespace OAuth2Demo.XForms
{
	public class BaseContentPage : ContentPage
	{
		protected override void OnAppearing ()
		{
			base.OnAppearing ();

			if (!App.IsLoggedIn) {
				Navigation.PushModalAsync(new LoginPage());
			}
		}
	}
}

There's a few interesting things going on here:

1. We're overriding the OnAppearing() method, which is similar to the ViewWillAppear method in an iOS UIViewController. You can execute any code here that you'd like to have run immediately before the screen appears.

2. The only thing we're doing in this method is checking to see if the user is logged in. If they're not, then we perform a modal push to a class called LoginPage. If you're unfamiliar with the concept of a modal, it's simply a view that takes the user out of the normal application flow in order to perform some special task; in our case, to perform a login.

So, let's create the LoginPage class in the Xamarin.Forms PCL project:

namespace OAuth2Demo.XForms
{
	public class LoginPage : ContentPage
	{

	}
}

Wait...why doesn't this class have a body???

Since we're using the Xamatin.Auth component (which does the job of building and presenting a web view that works with the provided OAuth2 info), we actually don't want any kind of implementation in our LoginPage class. I know that seems weird, but bear with me.

The LoginPageRenderer for iOS

Up until this point, we've been working solely in the Xamarin.Forms PCL project. But now we need to provide the platform-specific implementation of our LoginPage in the iOS project. This is where the concept of a Renderer comes in.

In Xamarin.Forms, when you want to provide platform-specific screens and controls (i.e. screens that do not derive their content from the abstract pages in the Xamarin.Forms PCL project), you do so with Renderers.

Create a LoginPageRenderer class in your iOS platform project:

[assembly: ExportRenderer (typeof (LoginPage), typeof (LoginPageRenderer))]

namespace OAuth2Demo.XForms.iOS
{
	public class LoginPageRenderer : PageRenderer
	{
		public override void ViewDidAppear (bool animated)
		{
			base.ViewDidAppear (animated);

			var auth = new OAuth2Authenticator (
				clientId: "", // your OAuth2 client id
				scope: "", // the scopes for the particular API you're accessing, delimited by "+" symbols
				authorizeUrl: new Uri (""), // the auth URL for the service
				redirectUrl: new Uri ("")); // the redirect URL for the service

			auth.Completed += (sender, eventArgs) => {
			// We presented the UI, so it's up to us to dimiss it on iOS.
			App.SuccessfulLoginAction.Invoke();

			if (eventArgs.IsAuthenticated) {
				// Use eventArgs.Account to do wonderful things
				App.SaveToken(eventArgs.Account.Properties["access_token"]);
			} else {
				// The user cancelled
			}
		};

		PresentViewController (auth.GetUI (), true, null);
			}
		}
	}
}

There are important things to note:

1. The [assembly: ExportRenderer (typeof (LoginPage), typeof (LoginPageRenderer))] line at the top (and importantly before the namespace declaration) is using the Xamarin.Forms DependencyService. It's not the most beautiful thing in the world because it's not IoC/DI, but whatever...it works. This is the mechanism that "maps" our LoginPageRenderer to the LoginPage.

2. This is the class in which we're actually using the Xamarin.Auth component. That's where the OAuth2Authenticator reference comes from.

3. Once the login is successful, we fire off a Xamarin.Forms navigation via App.SuccessfulLoginAction.Invoke();. This gets us back to the ProfilePage.

4. Since we're on iOS, we're doing all of our logic inside of the ViewDidAppear() method.

The LoginPageRenderer for Android

Create a LoginPageRenderer class in your Android platform project. (Note that class name you're creating is identical to the one in the iOS project, but here in the Android project the PageRenderer inherits from Android classes instead of iOS classes.)

[assembly: ExportRenderer (typeof (LoginPage), typeof (LoginPageRenderer))]

namespace OAuth2Demo.XForms.Android
{
	public class LoginPageRenderer : PageRenderer
	{
		protected override void OnModelChanged (VisualElement oldModel, VisualElement newModel)
		{
			base.OnModelChanged (oldModel, newModel);

			// this is a ViewGroup - so should be able to load an AXML file and FindView<>
			var activity = this.Context as Activity;

			var auth = new OAuth2Authenticator (
				clientId: "", // your OAuth2 client id
				scope: "", // the scopes for the particular API you're accessing, delimited by "+" symbols
				authorizeUrl: new Uri (""), // the auth URL for the service
				redirectUrl: new Uri ("")); // the redirect URL for the service

			auth.Completed += (sender, eventArgs) => {
			if (eventArgs.IsAuthenticated) {
				App.SuccessfulLoginAction.Invoke();
				// Use eventArgs.Account to do wonderful things
				App.SaveToken(eventArgs.Account.Properties["access_token"]);
			} else {
				// The user cancelled
			}
		};

		activity.StartActivity (auth.GetUI(activity));
		}
	}
}

Again, let's take a look at some interesting things:

1. The [assembly: ExportRenderer (typeof (LoginPage), typeof (LoginPageRenderer))] line at the top (and importantly before the namespace declaration) is using the Xamarin.Forms DependencyService. No difference here from the iOS version of LoginPageRenderer.

2. Again, this is where we're actually using the Xamarin.Auth component. That's where the OAuth2Authenticator reference comes from.

3. Just as with the iOS version, once the login is successful, we fire off a Xamarin.Forms navigation via App.SuccessfulLoginAction.Invoke();. This gets us back to the ProfilePage.

4. Unlike the iOS version, we're doing all of the logic inside of the OnModelChanged() method instead of the ViewDidAppear().

Conclusion

That pretty much wraps up a simple OAuth2 login scenario with Xamarin.Forms. I used Instagram as a demo.

Again, here it is on iOS and Android: