Best way to use OAuth for application - angularjs

I am building an AngularJS application with a Laravel API. I am looking for authentication for a couple of days, but I am stuck.
I found OAuth 2.0 as a kind of default authentication, also used by Facebook and Twitter and so more. A lot of tutorials I found are about using OAuth 2.0 with Facebook and Twitter or Google. But, I do not want to authenticatie a user with Facebook, but I want to build my own authentication, using the user credentials in my own database. So I guess, I need my own OAuth provider.
The authentication has to be very secure and easy to connect for other companies, who want to use our data (it is a web application for primary schools).
I believe there are a lot of answers possible on this question. But, I also believe a lot of people have the same question ;)
Who can explain me how to use OAuth 2.0 or a similar authentication method?

You are right - if you want to implement OAuth 2.0 you need to be your own provider (or authorization server). Being your own provider also means you can actually skip some parts of the process (e.g. the screen with a confirmation if the user really wants to grant this application the right to that etc...)
If you decide to go with OAuth 2.0, there's a widely used package called oauth2-server-laravel that helps with the whole process.
However you could also develop you're own token-based authentication system. Actually the basics are pretty simple:
Login
Verify credentials
Generate token
Store token in database
And then on request you check if the token is in the database (and hasn't expired yet)
Dead simple right? Well.. as you may already know, that's too easy to be true.
Especially where security is of high importance, You have to consider every case and you should really know what you're doing. That's why I recommend you use the OAuth standard. Yes, it may be a bit of an overkill but I believe it's worth it.
Hope I could help :)

Related

Can I use Authorization Code with PKCE Flow for mobile app?

I know that OAuth 2.0 Authorization Code with PKCE Flow is the best practice of OAuth. We plan to use it for our WEB application.
But I don't understand how can I use this flow for native UX my mobile app without using a browser for authentication (https://medium.com/klaxit-techblog/openid-connect-for-mobile-apps-fcce3ec3472)
Using a browser is unacceptable in our case.
The mobile app has a Login Page where user enters their сredentials, 3-th-party authorization is not.
Is it possible to use Authorization Code with PKCE Flow or should I use the OAuth2 Resource Owner Password Grant in my case?
Are there any other alternatives?
There are two main options here:
1. AUTHORIZATION CODE FLOW + PKCE
This is typically done by plugging in AppAuth libraries and using a Chrome Custom Tab or ASWebAuthenticationSession window so that the user experience feels integrated. These are the main advantages:
Login tends to be more user friendly, and features such as password autofill and single sign on across multiple apps works best
You can potentially support many authentication options rather than just user name and password
It will do better in third party security reviews (if applicable) since it is the standard option - eg Google use it for mobile Gmail
There is a learning curve in implementing it though. Also, it has a prerequisite of using an Authorization Server and externalising the login user experience. This can be difficult to manage politically at some companies.
2. RESOURCE OWNER PASSWORD GRANT
This is also possible as a short term solution but is deprecated in OAuth 2.1 and will fare less well in security reviews. It limits you to password based sign in and can sometimes result in long lived access tokens (if refresh tokens are not supported). Plus points are that you are more in control of branding and login screen behaviour.
PRACTICAL NEXT STEPS
If you want to look at some working apps that use Code Flow + PKCE, feel free to run the apps from my Quick Start Page. Maybe then you can make an informed decision based on factors such as User Experience and what is most important to your stakeholders.
If you are just looking for first-party signup and login, Ory Kratos is an open-source solution that does not use OAuth2.0 for first-party flows.
So you can skip the complexity of OAuth2.0 entirely!
A nice bonus is that you don't need to open a browser window (as you always have to do with OAuth2.0, there is no way around it).
Check out this tutorial for some concrete implementation details:
https://www.ory.sh/login-react-native-authentication-example-api/

Resource-owner password credentials grant suitability for first-party login

I have a public-facing application that uses ASP.NET Core Identity to store first-party logins, and no intention of using third-party IdPs like Facebook or Google. I want to build the front-end in React, and the application comprises an API fronting a couple of back-end services to which I'll need to forward JWTs for authorisation.
The plan so far is to use Identity Server 4 as the IdP for the project, backing it into the ASP.NET Core Identity data stores.
Current guidance is to use Authorization Code Flow with PKCE, which would require redirection to the IdP, two sets of styling etc.
In this scenario, where there is no possibility of a third-party IdP, is Resource Owner Password Grant still highly discouraged? On the face of it, it gives a neater experience:
User populates React-based login page
XHR POST to IdP with credentials (modulo an MFA challenge)
IdP returns an access token, React app subsequently uses that for future requests to the API
What issues will I introduce by pursuing the ROPC grant in this specific situation, vs accepting the need and duplication involved in a redirect-based flow to the IdP?
AMOUNT OF WORK
This is one of the big issues. As well as a login screen you'll have to make sure other areas such as Forget Password also work. If you build a second app you'll need to make it work there also.
EXTENSIBILITY
This article summarises problem areas. One of these is no scope to ever extend login solutions.
SECURITY
Token refresh does not (usually) work with ROPG, which leads to long lived access tokens and other complexity. Also, with OAuth it is recommended that the app never sees credentials.
From a security viewpoint it looks more modern to redirect the user - all the big providers do it - eg Google, Microsoft.
BRIDGING SOLUTION
As you say, if the password is private to your app it may not be the worst thing in the world. Capturing a user's Google password in your app would be a bad thing though.
ROPG has its uses but does not have much of a future - it is deprecated in OAuth 2.1 and providers will be getting rid of it. So I would also recommend what LalitaCode suggests ..
You can create a React based Identity Server login page for Authorization Code flow with PKCE instead of using MVC UI if you want. It is just extra work and complicated. I would recommend you just style the Identity Server MVC UI to look exactly like your frontend SPA. This is the simplest way and the path I took when I did a project with Identity Server(with Angular as front end).

OpenID Connect /Node /React

There is a lot of examples how to implement OpenID Connect auth. in Node - code grant (+ client password).
There is a lot of examples how to implement OpenID in React (SPA) - code grant with PKCE
Even I know that PKCE it's rather secure, however I feel bad to relegate authentication solely on client side.
Every React SPA has backend (at least it should be hosted somewhere).
I want to have server side in Node (Express) to securely save client password and make all heavy lifting with Identity Server and
React for front-end.
As I already said there is a lot of examples of "Node (Express) with template engines" for authentication.
But I want to use React as "template engine".
So, I am looking for full and correct implementation of it. Meanwhile I cannot find it.
Can anybody help me with it - to find an example?
You need some actual protection in the SPA / browser though, and the 2 common options are:
Plug in OIDC Client Library to do the heavy lifting, so that you don't write much security code yourself. This library runs a number of strict security checks before accepting tokens.
Use a proxying solution that results in your SPA getting a cookie.
For an SPA this tends to be a more of a home grown solution rather than a standards based one
RESOURCES OF MINE FOR OPTION 1
SPA Security Code
Explanatory Notes
FOR OPTION 2
You could use the Open Id Client Node JS Library server side, and follow it's guidance.
I've found 2 solution on the Internet.
The First :
Implement social authentication with React + RESTful API
On the frontend, get the 3rd party app’s login popup to appear.
(Still on the frontend) Grab the authentication token the 3rd party app returns after >agreeing to login.
(Yep, still frontend) Send that token to the backend as part of the body of your >request. (I like to use Blobs, but that’s just me.)
On the backend, verify the token.
If the token is authentic, you will receive the user as part of the verification >response (at least that’s the case with Passport.js, which we’ll be using).
Save the user’s data to your database.
Return a JWT token to the frontend. What you do with that token is out of scope for >this tutorial, but it should probably be used to authenticate each of the logged in >user’s actions.
Very well explained, with github working example social-auth-example
It's only for social authentications, but I think no problem to make something more general or at least to add my OpenID Connect Auth. provider.
The second example:
React Authentication with Twitter, Google, Facebook and Github
This approach uses socket.io. Very interesting.
P.S.
So, I need to figure out what solution is more secure and if there any security breaches.
Not easy task to do. It's so pity, there is no standard flow for my problem. I can find 1000 reasons why it's better to make all heavy lifting on back-end and not to rely on OIDC Client Library. The first reason is my boss :)

Google App Engine: Endpoints authentication when custom auth or Open ID is used

I recently got started with Google App Engine. I intend to use Flask to serve web pages and the Endpoints API, preferably with the Endpoints-Proto-Datastore for everything else.
From the beginning, non-Google Authentication mechanisms on GAE seem like they need some work. I'd appreciate any light shed on issues I've found so far:
Custom Authentication
If you can write an Open ID provider as part of the app, use something like Python-OpenID and also implement a consumer in the same workflow so it appears like regular login. This way it integrates nicely into what the GAE Users API provides.
I'm guessing if this is done right, users.get_current_user() will work just fine.
If you want to skip writing your own OpenID provider and instead write an email/password auth system using Flask-Login integrating with NDB, that should be alright too. However, one puzzling bit of info in the GAE documentation says I can instantiate a user object like so:
user = users.User("XYZ#XYZ.com")
However, (there is no user.put() method here) a users.get_current_user() still returns None. So what would the use of constructing the user object ever be?
Endpoints Authorization
On including a user=required in the method decorator for an Endpoint-Proto-Datastore rolled API, OAuth seems to work right away - all you have to do while testing it in the APIs explorer is to turn on the OAuth 2.0 switch and pick a valid Oauth 2.0 Scope. So does that mean that if we implement a OpenID provider that integrates with the Users API correctly, it won't be sufficient to use the OAuth magic of Endpoints API?
Here too, it seems like constructing a user object will not help satisfy the authentication requirement.
How would custom authentication / another OpenID implementation work with Endpoint API authentication/authorization?
I wanted to not use oAuth, but a simpler form of Authentication with user/token.
So what I've done is create a custom ServletFilter that maps to /_ah/spi/* and intercepts login information from the HTTPServletRequest there, if it is an Endpoint-API-Request.
Seems to work thus far, but am not really sure if that is the way to go. But as I've found no examples for non-oAuth-Auth anywhere, that's currently my best shot.
Would love to get some best practice hints from #bossylobster or #Dan Holevoet.

How to use Google authentication without redirection?

Is there a way to use Google accounts to authenticate my own personal website? I understand Google provides an API for authentication but it requires redirection. Is there anyway to have a customized login process without being redirected to Google?
By the way I'm a total noob when it comes to user authentication. I did try to find a preexisting thread but was unable to find one.
For exactly the reason given by Kris, Google (along with similar OAuth providers) doesn't allow you to authenticate users directly.
It's a security measure to protect both themselves and their users from the Web equivalent of ATM card skimmers.
I have a usability answer rather than a technical one.
I am unsure if this is doable but, even if it is doable, I would highly suggest NOT doing it. Think of it this way: you want a user to use their Google account to login to your website. If you were that user, would you feel more comfortable entering your login information on a Google website or someone else's website that has nothing to do with Google?

Resources