How to authenticate with an external 3rd party API from a single page Nuxt application over oauth? - vue.js

I have a Nuxt application that interacts with NationBuilder, a 3rd party application. In order for users on my site to interact with data from their NationBuilder account, my app must allow them to authenticate over OAuth with the NationBuilder API.
The first step of this OAuth process works fine; My client sends a request to the NationBuilder API's /oauth/authorize endpoint. The browser redirects the user to NationBuilder's website where the user can login to grant my application access to their NationBuilder data. Then, NationBuilder redirects the user back to a second page on my site with query parameter in the URL containing what is called the "code". This second page on my site hits our internal API with this code, which in turn hits the Nationbuilder API's /oauth/token endpoint with the code to receive the access_token. Now we can use this access_token in any call to the Nationbuilder API.
The issue I'm running into is that when Nationbuilder first redirects the user to that second page in our Nuxt app, the reloading of my site takes a while and seems to be skipping some initialization configuration steps. I think this is the case because some of the functions that normally work when I boot up my site are not found.
I am in the process of developing the application, so I am running my site on localhost and using ngrok to create an https tunnel to satisfy the NationBuilder API. Maybe this issue is related to the tunneling?
I have a hunch I should be doing this all differently. If there is a conventional way of authenticating a Nuxt application with a 3rd party application over OAuth, please point me to an example/docs.
Cheers.

Related

Auth0 - OAuth login with dynamic callback

I want to secure my Web-App with Auth0 in React. This means a user can login on my page and use the resulting Access Token to make requests to services behind AWS API Gateway.
But Auth0 requires that all possible Callback URLs are defined in the Dashboard.
This works well as long as the Application is hosted on a domain owned by me.
In my case the React App will be distributed as a Plugin (Shopify, Woocommerce). My users will install this Plugin and use my App through their shopsystem-UI. Which means that requests from the browser are made from their domain.
How should I securely access my Services through this client which is distributed on Domains which i don't know beforehead?
As my research shows, one solution would be Dynamic Application Registration. But with this I would end up with one Auth0 Application per user and Auth0 Limits that to 100 Applications.
How should I handle my case instead?

Getting access token from Microsoft AD Application without redirection

Requirments
I have created a Web API that requires access token from Microsoft Active Directory Application and then uses the access token in a subsequent request to Web API. I am consuming these Web APIs in my PowerApp components. However, I am unable to get the access token internally from Javascript without redirecting the user to the login page. As per my requirements, I have to get the access token and then access my Web APIs, without redirecting the user to login.
Implementation
I am making a POST call to "https://login.microsoftonline.com/{tanent_id}/oauth2/token" from JS and trying to get the access token by using client secret.
Issue
I am getting the CORS issue whenever trying to reach the login API. I can get the access token from Postman and Internet Explorer but not to the rest of the browsers (i.e. Chrome, Firefox, Edge).
Can someone suggest me the way to prevent the CORS issue and proceed with my Web APIs calls with the access token. I have already learned the Implicit approach and it did not work since we need to redirect to URL in this approach too.
Since Implicit Grant Flow is not your option, and you do need an app-only token, I am afraid you must do the request from a back-end application. Then you can get the access token from the back-end application.

Keycloak Direct Grant API and Admin REST API

I am creating a mobile application which will talk to my REST Web Services, for login, GET, POST, DELETE and logout. I have been trying to figure out how to secure these REST Web Services using Keycloak. I do not want any In Browser Login on the mobile application, so I was inclined towards Direct Grant API and Admin REST API for authentication and token validations. But, now after looking at the available options on Keycloak, every request from the mobile app must be intercepted, and then make a REST call to the Keycloak module for validating the token and then return a response back to the mobile app.
Is there a better way in doing this? Some inbuilt function calls to check the token validity instead of making an HTTP call for every request from the mobile app? I think this is a huge overhead.
My server is on JBOSS. Spring, Resteasy and Keycloak-services are being used to figure out a solution for this problem.

How can I share Azure Active Directory authentication between server side and client script?

I currently have an MVC app that's using the Microsoft.Owin.Security.WSFederation package for authentication with Azure's Active Directory. This lets me use the Authorize attribute on my controllers to redirect users to the Microsoft login site.
I now have the requirement to add access to a WebAPI project that will be hosted on a different domain but will use the same AD store.
I've managed to pull together something using the ADAL JS library provided by Azure but this gives the following process:
user visits site and is redirected to Azure login
user logs in and is returned to site
JS code checks for login and redirects to Azure
user is already authenticated so redirects back to site with token
JS picks up token, stores it, and redirects to the original page
So it works, but involves 4 redirects, which seems like a huge overhead.
I thought that there might be some way of pulling a bearer token out of the authorisation credentials returned when the WSFederation succeeds but I can't see anything like that in the data. And, even if I could, I don't know how I'd be able to then refresh the token from the client script. So I strongly suspect I'm doing something fundamentally wrong.
What would be the best process for sharing authentication between the two sites?

How to authorize mobile apps with a third party by oauth BUT connect to my service, not the 3rd party

My app is architected as follows: I have a web service (running on GAE, not very relevant to this question) and the data that this service contains is made available through a website and through mobile and desktop apps.
Currently, the user authenticates to the website via Google ClientLogin and the apps authenticate/get authorized via GAE's built-in oauth provider. (OAuth is being used here mostly for authentication, my app doesn't actually use any external data via OAuth other than the user's unique ID and email address.)
What I'd like to do is expand the number of services that users can use to login. Because of the complicating factor of the apps, it seems I need OAuth. But I can't really properly conceptualize how this flow should go.
Lets take Facebook as an example. When a mobile app goes through the Facebook oauth flow and acquires an access token, this isn't enough - because its my service, not the app, that actually needs to talk to facebook to retrieve contact info and a unique user ID. This leads me to think that the OAuth process needs to happen in the context of my service, and not the mobile app. My service then becomes the consumer and Facebook the oauth providor, and the service holds on to the oauth access token, this happens when a user sets up their account for the first time.
If this is the correct approach, where does that leave authentication for the apps? What happens when the user already has an account and installs a fresh instance of a mobile app? I imagine also going through the oauth process, matching up credentials with the data already stored by my service, and then issuing my own "access token" to the app from the service, to authorize that instance of the app. This seems convoluted and hackish.
I'm sure I can't be the only person who is in effect "borrowing" the account system of a third party for a mobile app with a backend, but I really don't see what the proper way to do this is.
What am I not seeing and/or getting conceptually wrong?
A few colleagues and I once did a project quite similar in nature, back in university. We authenticated our users through either Facebook or Foursquare, using their respective OAuth APIs.
The native Android version of the app opened up a WebView with the OAuth provider's start page, which redirected back to our service after authentication. Then our service did a request for the OAuth token from the OAuth provider (Foursquare has some pretty simple instructions). When we got that token, we set up a session using cookies, which we could access from the app.
To validate sessions, we just checked whether the access token was still valid with the provider. We also used the respective providers' unique user IDs to distinguish users.
So yes, what worked for us is: Make the app authenticate & authorise your service, not the app itself.