Ionic 2 App Integration with Auth0 and Firebase

Problem Statement: Ionic 2 App authenticates using Auth0 and then using Auth0 token to firebase API as backend without using firebase authentication.

Solution: I have created base version of this project in GitHub. You can clone it from here.

https://github.com/giridharprakash/ionic2-auth0-angularfire.git

1. Clone the project
2. npm install ionic cordova typescript -g
3. After cloning project, run npm install for all local packages to install.

Step 1:

I am using facebook authentication with Auth0, so first we need to create facebook app in developer console.

Once you got application Id and App Secret then add the following Auth0 callback url on successful authentication. Fore new Apps, you need to add facebook login by clicking on “Add product” and then go to “Settings” to add callback Url.

Step 2:

Create Firebase app in console.
Now we need to get Api key to integrate to Auth0. Click on seetings icon.

Now go to Service Accounts and then click “Generate Private Key” downloads JSON. we will use this information in Auth0 Configuration.

Next need to get firebase config, for this go to Overview-> Add to web. this configuration is used in appmodule.ts

Step 3:

Create Auth0 Account
Now go to social connection and select facebook. Enter application id,app secret, scope you need for your application.

Create new application with type “Native”. Change callback url if needed.

Now go to Addons tab and enable firebase. Fill information in settings from the json file got from firebase.

Now go to connections tab in your app, go and enable facebook. if you remember we enabled facebook in social connection and then we add facebook for each and every app we work.

Step 4:

Now we will go through some of the code.

src/auth0-variables.ts: You will set Auth0 App details in this file before you run the application.
src/app/app.module.ts: We will configure angular fire module with firebase configuration info as shown above.
src/services/auth.service.ts:
login() method shows Auth0 screen.
constructor() This has authentication callback where we get Auth0 token and then we can get firebase access token.

Asp.Net Web API 2 Customize Token Expiration

Problem Statement: We need our Web API  to issue bearer tokens with different expiration based on type of the client (Web, Mobile and Desktop).

Solution 1: Let the WEB API always issue token with same expiration for every client. this is straight forward implementation done in application startup.

AccessTokenExpireTimeSpan: you can set this property based on the security needs of your application.


OAuthOptions = new OAuthAuthorizationServerOptions
            {
                TokenEndpointPath = new PathString("/Token"),
                Provider = new ApplicationOAuthProvider(PublicClientId),
                AuthorizeEndpointPath = new PathString("/api/Account/ExternalLogin"),
                AccessTokenExpireTimeSpan = TimeSpan.FromDays(2),
                //TODO
                // In production mode set AllowInsecureHttp = false
                AllowInsecureHttp = true,
                AuthenticationMode = AuthenticationMode.Active,
                AuthenticationType = OAuthDefaults.AuthenticationType
            };

// Enable the application to use bearer tokens to authenticate users
app.UseOAuthBearerTokens(OAuthOptions);

Solution 2: Let the Web API issue token with different expiration times based on the client type. we would give longer expiration for desktop clients.

OAuthAuthorizationServerOptions:
Provider: we have custom implementation for the ApplicationOAuthProvider as shown in Solution 1. Now for each client id we can set different expiration.
AccessTokenExpireTimeSpan: You need to comment this in start up configuration as shown in solution becuase you are customizing it in provider class.

Note: I didn’t provide full implementation here.


public class ApplicationOAuthProvider : OAuthAuthorizationServerProvider
{
    public override Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context)
    {
        string clientId;
        string clientSecret;
        //This AuthModel is my custom model that will be passed in OwinContext
        var authModel = new AuthModel();

        if (context.TryGetFormCredentials(out clientId, out clientSecret))
        {
            if (clientId.Equals("appWeb", StringComparison.OrdinalIgnoreCase))
            {
                context.Options.AccessTokenExpireTimeSpan = TimeSpan.FromHours(2);

                context.OwinContext.Set("oauth:client", authModel);
                context.Validated(clientId);// please validate client credentials.
            }
            else if (clientId.Equals("mobile", StringComparison.OrdinalIgnoreCase))
            {
                context.Options.AccessTokenExpireTimeSpan = TimeSpan.FromDays(3);
                authModel.ClientSecret = clientSecret;

                context.OwinContext.Set("oauth:client", authModel);
                context.Validated(clientId); // please validate client credentials.
            }
            else
            {
                context.SetError("invalid_client", "Client credentials are invalid.");
                context.Rejected();
            }
        }
        else
        {
            context.SetError("invalid_client", "Client credentials are invalid.");
            context.Rejected();
        }

        return Task.FromResult(0);
    }
}

Happy Coding!