Search code examples
nativescriptkinvey

Configuring OAuth 2 Authentication with NativeScript provided Enterprise Auth project template


I am Configuring OAuth 2 Authentication with NativeScript provided Enterprise Auth project template, I followed the complete guide to configure Azure Active Directory. After setting up URLs and keys when I am executing the application through tns preview, it is giving me following error:

https://auth.kinvey.com/v3/oauth/auth?client_id=kid_SJcDEau7N&redirect_uri=nsplayresume%3A%2F%2F&response_type=code&scope=openid

Error: {"error":"invalid_client","error_description":"Client authentication failed.","debug":"Client Verification Failed: redirect uri not valid"}

When I check the login script it was showing error because there was no argument given in the Kinvey.User.loginWithMIC() function so I provided Kinvey.User.loginWithMIC('http://example.com') as it was showing in the video tutorial.

login() {
    if (Kinvey.User.getActiveUser() == null) {
        Kinvey.User.loginWithMIC()
            .then((user: Kinvey.User) => {
                this.navigateHome();
                console.log("user: " + JSON.stringify(user));
            })
            .catch((error: Kinvey.BaseError) => {
                alert("An error occurred. Check your Kinvey settings.");
                console.log("error: " + error);
            });
    } else {
        this.navigateHome();
    }
}

as expected it should show the login screen for the account which I have configured in Azure Active Directory.


Solution

  • Here I have a NativeScript solution, which makes use of Kinvey's Mobile Identity Connect. It's basically built using the same template that you would like to make use of. There are couple of important steps, that you need to take care before running that project, they are as follows:

    • Open kinvey.common.ts file from inside the src/app/shared folder and set your Application ID and Application Secret (and Instance ID if present, if not - remove the attribute). That's needed so that the NativeScript application can connect to your Kinvey Backend.
    • Open the Login component's TypeScript controller and set your MIC identifier. The MIC identifier is the MIC Service's ID. That will tell the app which service to refer to from the backend.
    • Open the MIC Service settings from the Kinvey Console and set myscheme:// as a redirect URI. The authorization endpoint normally redirects the user back to the client’s registered redirect URL. Depending on the platform, native apps can either claim a URL pattern, or register a custom URL scheme that will launch the application. For example, an iOS application may register a custom protocol such as myapp:// and then use a redirect_uri of myapp://callback.

    For most up-to-date list of those crucial items, you can check out the repository's README file. Try that, and let me know if you can get Kinvey MIC working.