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.
Related
I want to understand whether nuxt-auth uses serverMiddleware and if not how can i implement one. I want to make my admin panel really secured, I have my backend secured however even if someone manages to overcome auth middleware on the frontend, which won't be that difficult(if auth Module uses client-side middlewares), I don't want nuxt to provide him/her with the layout and all pages even though I know that he/she is not going to be able to do anything because my routes on the backed require token verification and account data. If you can, please provide some info on the subject. Thanks!!!
So in short you cannot use the middleware provided by the #nuxtjs/auth plugin as a serverMiddleware, you can only use it as a normal middleware.
But that doesn't mean that it's insecure, normal middlewares actually executes both on server and client side before the page is rendered, so if you want to execute a middleware that will throw a 404 if the user isn't logged in you can do this in a normal middleware too, the serverMiddleware's capabilities are actually limited, you can't access nor the store or any client side information, because you only get (req,res, next) as parameters, and since Authentication is stored in store and cookies you can't make it work in Node.js only. This is a good example of what you can use serverMiddleware for: https://jackwhiting.co.uk/posts/handling-redirects-in-nuxtjs-through-middlware/
If you console.log something in normal middleware you should be able to see it both in your developer console and bash where npm run dev is running, this would mean that first the server executes it and then the client side too.
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.
I've been experimenting with Cognito for a few days, and I am now testing the Built-in signing UIs. I have managed to get it working, I am able to see the login page and successfully login with a User I have created. For my callback URL I'm using localhost:3000 as a testing ground, where I'm running a React SPA.
However, I am at a complete loss about what to do once I'm redirected. The documentation says I should get a URL with a JWT as a query parameter. Instead, I'm getting a URL of the form:
localhost:3000/?code=########-####-####-####-############
where # is an alphanumeric character. I don't recognize this code, I don't think it is a JWT. I would highly appreciated it anyone could:
explain what it is
direct me to any kind of documentation on how to use it?
After redirection, You are getting localhost:3000/?code=########-####-####-####-############
This means you have enabled code grant flow
This code is used to get the tokens from Amazon Cognito.
Request Type: POST
URL: https://mydomain.auth.us-east-1.amazoncognito.com/oauth2/token
PayLoad:
grant_type=authorization_code&
client_id=<CLIENT_ID>&
code=<AUTHORIZATION_CODE>&
redirect_uri=com.myclientapp://myclient/redirect
Here you can see we are passing code in the payload with redirect url.
The response of this POST request will be your tokens ( If Successful authentication :) )
Sample Response:
{
"access_token":"eyJz9sdfsdfsdfsd",
"refresh_token":"dn43ud8uj32nk2je",
"id_token":"dmcxd329ujdmkemkd349r",
"token_type":"Bearer",
"expires_in":3600
}
You can save this token in your localstorage or sessionstorage for further custom authentication.
Please refer all the available endpoints of amazon cognito for more details.
Ex:
Authorization Endpoint
Token Endpoint
I hope now it makes clear to you!
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
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.