Middleware for secure API when user registered with socialite - api

I would like to let my users sign up for my laravelbased application using facebook or similar through socialite.
My users use a mobile app on their smartphones, which accesses the API of my app. Those API-routes are currently secured through the auth.basic middelware
Route::group(['prefix' => 'api/v1', 'middleware' => 'auth.basic'], function()
{
// ...
});
The app interacts with the api restfully through basic protected urls..
https://user:pass#myapp.com/api/v1/item/1
Now, how can i enable my users to access my protected api-routes, when they have registered through socialite? Is there a Package or a predefined middelware? Also, how would the URLs look like? Is it even possible to allow API calls with both, normally registered users and those being registered through socialite at the same time?

I see 2 best options in here.
Easiest is to use simple auth middleware in combination of logging in to the API at first before any other API calls
Secondly you can create custom middleware and include a token in your API call that authenticates the user. Example of such call after logging and getting token is below. Middleware gets the url param and checks if this is correct.
https://myapp.com/api/v1/item/1?token=123456

Related

How to use nuxt auth module with AWS Cognito ui

I am want to build an app which has a static frontend ( target: 'static' in nuxt.config.js ), and a backend using ktor. The app will need to authenticate users but I do not want to manage passwords and things myself, so I would like to integrate with AWS Cognito. Based on my understanding, I think this is the workflow I want:
User is browsing the site anonymously (no login)
They do some action which requires login or explicitly click on login button.
User gets redirected to AWS Cognito ui for login. They may register for new account, login with their existing, or login using another provider (after configuring cognito for it).
Cognito ui redirects user back to the app ui but with JWT tokens in query params (I think this is just how cognito does it)
The JWT token (s?) get stored in vuex store / nuxt auth
The token is used when making requests to the backend. As well as showing some additional components / actions if the user is authenticated and their basic info like username (part of jwt?)
I think I have cognito and the ktor backend setup correctly but I don't know how to get started for the frontend.
The nuxt auth module guide says to set up middleware, but afaik middleware is only for server side rendered apps.
I need to activate the vuex store but I don't know what to put there. Are there some specific things the auth module expects or do I just create an empty file in the directory?
How do I tell it when to redirect or read the token from query param?
How to parse the JWT token (if it doesn't automatically) and get some payload info like username from it?
Does the axios module get configured automatically to make use of this?
I found this old github issue 195 in the auth module repo, but I believe that's for when the "login form"/ui is part of the nuxt app and client is making use of the cognito api without 'redirect'.
Unfortunately everything in this stack is new for me so any help is appreciated. If there is already a project doing something similar, I look at the code and try to figure it out but right now I'm lost.
update 2020-12-31, mainly so that I can put a bounty on this soon: The live demo at https://auth0.nuxtjs.org/ seems to be doing what i'm looking for but then the github page read me shows something else https://github.com/nuxt/example-auth0. Also i don't see middleware / plugins used anywhere. it's all mostly configured through nuxt config, so it only works for the auth0 custom provider?
I was having the same issue as you:
How do I tell it when to redirect or read the token from query param?
I solved this by configuring auth.redirect.callback to match the endpoint that cognito will callback with the token. I believe this will tell the middleware when to look for a new token in the query param.
nuxt.config.js:
auth: {
redirect: {
callback: '/signin',
...
},
strategies: {
awsCognito: {
redirectUri: "http://localhost:8080/signin",
...
}
}
}
And to answer your other questions:
The nuxt auth module guide says to set up middleware, but afaik middleware is only for server side rendered apps.
I tried this setup with ssr: false and it still works fine.
I need to activate the vuex store but I don't know what to put there. Are there some specific things the auth module expects or do I just create an empty file in the directory?
An empty index.js file is fine.
How do I tell it when to redirect or read the token from query param?
See first answer above.
How to parse the JWT token (if it doesn't automatically) and get some payload info like username from it?
From my initial testing I found that the middleware will automatically call the userInfo endpoint when user data is requested e.g. this.$auth.user.email
strategies: {
awsCognito: {
scheme: "oauth2",
endpoints: {
userInfo: "https://x.amazoncognito.com/oauth2/userInfo",
ref: https://docs.aws.amazon.com/cognito/latest/developerguide/userinfo-endpoint.html
Does the axios module get configured automatically to make use of this?
Yes.

Auth::user() returns null with the user logged in but works in blade template

I am using Laravel 6 and in the controller store method, Auth::user() returns null even when the user is logged in but works in blade template. I have gone through similar questions but nothing is working.
I am posting to an API route and I am not sure whether this is the reason. Kindly assist.
If you have not adjusted the api web group or the RouteServiceProvider that comes with the default application you will not have any session support in your API routes (routes/api.php). The APIs are usually stateless so no session support. If you want to deal with authentication using the built in authentication system you would want to deal with a token based system. The default api guard that is setup for you will use the TokenGuard which will look in the request for a token being passed to authenticate the user against. You would need to assign the middleware auth with the parameter api, to specify the api guard, auth:api.
If you send a request correctly to one of these end points now, including the token, you will have a user returned from Auth::user() or $request->user() etc.
Laravel 6.x Docs - API Authentication - Passing Tokens in Requests
Laravel 6.x Docs - API Authentication - Protected Routes auth:api
Pleease read the whole section for a better understanding of using this type of Guard with the built in Authentication system:
Laravel 6.x Docs - API Authentication
If you don't want to deal with a "stateless" API, and you would rather use sessions you can just move your API routes to the web.php file and prefix them with api.

How to access express server session in nextjs api routes?

I am building my site with NextJs. I have a social login component where users can login via e.g. facebook Login. From the social login component (e.g. Facebook login) I get back user data (name, email) into my custom _app . So far so good.
With this user data, I want to create (or identify) an user on my headless wordpress backend. I want to use the Wordpress REST API for that. So I created an wordpress API restpoint which recieves user data, creates the user in wordpress if he is not existing yet, and then returns a JWT access token for calling other wordpress API restpoints where the user then can create some user specific data in my wordpress DB via my website.
What is the best approach to do this with Nextjs and a custom express server? My first idea was to use the new API Route feature and created a pages/api/test.js page like the example in the doc shows.
export default function handle(req, res) {
res.send({some:'json'})
}
So the whole flow starts in _app when getting the user data from the social login component. My first approach:
handleFBSocialLogin = (user) => {
//pesudo code:
//fetch("/api/test") with user data
}
When doing this my api/test.js is called and inside that i could then call my Wordpress API to get the token back, right?
But then i want to store the token server-side in my custom express server session, but how do i do that now?
And how do i read it from there in later requests to other wordpress API restpoints?
And - does that approach makes sense at all ?
Appreciate any input!

User authentication and login flow with Ember and JSON web tokens

I'm trying to figure out how is best to do authentication and login flow with Ember. I'll also add that this is the first web app I've built so it's all a bit new to me.
I have an Express.js backend with protected endpoints using JWTs (I'm using Passport, express-jwt and jsonwebtoken for that) and that all works.
On the client-side, I'm using Ember
Simple Auth with the JWT authenticator. I have the login flow working (I'm using the login-controller-mixin) and correctly see the isAuthenticated flag in the inspector after a successful login.
The thing I'm struggling with is what to do after login: once a user logs in and gets the token, should I make a subsequent call to get the user details, e.g. GET /me, so that I can then have a representative user model client side? These details would then let me transition to the appropriate route.
See this example in the repo for an example of how to add a property to the session that provides access to the current user.

Authentication for a Symfony2 api (for mobile app use)

I've developed a REST api for my Symfony2 application. This api will be used by a mobile app. Much of the functionality is done in the context of the currently authenticated user, ie:
$this->container->get('security.context')->getToken()->getUser()
I'm hoping that the mobile app will be able to post to the login action just like a traditional web form. If the credentials check out then Symfony2 does it's thing and sets a cookie (does this even work in the context of a mobile app accessing an api?). Then later api requests from that mobile phone will (hopefully) work with the native symfony2 security.context service container.
Would this work? I need to figure out this authorization process before I take the API to the mobile developers. If possible I'd obviously like to be able to use the native security.context service instead of building out a new auth system for the api that uses xAuth or something similar.
Thanks
I think you should do it stateless (without cookie).
I had the same problem, what i did:
in your app/config/security.yml, add:
security:
...
firewalls:
rest_webservice:
pattern: /webservice/rest/.*
stateless: true
http_basic:
provider: provider_name
...
Now you can make a request to your webservice:
class AuthTest extends WebTestCase
{
public function testAuthenticatedWithWebservice()
{
$client = $this->createClient();
// not authenticated
$client->request('GET', '/webservice/rest/url');
$this->assertEquals(401, $client->getResponse()->getStatusCode());
// authenticated
$client->request('GET', '/webservice/rest/url', array(), array(), array(
'PHP_AUTH_USER' => 'username',
'PHP_AUTH_PW' => 'password'
));
$this->assertEquals(200, $client->getResponse()->getStatusCode());
}
}
Here you are, How to create a custom Authentication Provider awesome article.
To Authentication to a Symfony2 application through api, you need use:
WS-Security
Yes Marc, jules is pointing to an example just to show you how to test authentication with http_basic.
To be RESTful you should avoid using cookies, otherwise just call it an API. About how secure is your authentication system you can go with http_digest over https or more secure signed request with api_key/api_secret approach.
Have a look here http://wiki.zanox.com/en/RESTful_API_authentication