After calling $auth.loginWith('google'), I am getting
http://localhost:3000/ru/user-registration#state=D7xooLsNNxNGfbvcQMU5g&access_token=ya29.a0Ae4lvC2z0XERgeRUipmu7c205WWCCSVgRZ-s_mYWg6ZoMgCGzVZ-U69arfpn-ybm5kthqtvqQrD7lGYmNDqiLtkW1aIecP6Wp-bwINMok3ztNcW5KwmlohLmtnbk4IZVkciKfb8T_JUtf89xpJcjpt2dSx_09FPGSKc&token_type=Bearer&expires_in=3599&scope=email%20profile%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&prompt=consent as a callback. What should I do next in order to get the info of the registered gmail. Any help or ideas are welcome
auth part in my nuxt.config.js
auth: {
strategies: {
local: {
endpoints: {
login: { url: "token/", method: "post", propertyName: "access" },
user: { url: "user/me/", method: "get", propertyName: false },
logout: false,
}
},
google: {
client_id: 'my_client_id',
redirect_uri: 'http://localhost:3000',
}
},
},
In your nuxt.config.js file you declare two differents strategies: local and google. If you would like to use Google as an identity provider you don't need to precise the endpoints.
Here is my actual config for one of my project:
auth: {
redirect: {
login: '/login',
logout: '/login',
home: '/',
callback: '/callback'
},
strategies: {
google: {
client_id: 'XXXXXxxxx.apps.googleusercontent.com'
}
}
}
And I have specified on Google API Console the following authorized URI: localhost:3000/callback for my dev environment and mydomain.com/callback for the prod.
Related
Hello I have the following configuration
nuxt.config.js
router: {
middleware: ['auth'],
}
auth: {
redirect: {
login: '/login',
logout: '/login',
home: '/',
},
strategies: {
cookie: {
options: {
httpOnly: true,
path: '/',
},
user: {
property: false,
autoFetch: false,
},
endpoints: {
login: { url: '/api/login', method: 'post' },
logout: { url: '/api/logout', method: 'post' },
},
},
},
},
and I the home component it is not necessary be logged, so I set:
export default {
name: 'IndexComponent',
middleware: 'auth',
auth: false,
}
but when I try to access to a / auth always redirects to /login.
when I do click nothing happens and nothing is displayed in the console.
How can I solve this?
In the documentation, it says
In case of global usage, you can set auth option to false in a specific component and the middleware will ignore that route.
But by "component", they mean a .vue component.
In our case, since we're using Nuxt it still needs to be a page (hence a route in the /pages/ directory) because this is logical from a router aspect.
I just want to redirect to error page, is there a possibility to redirect to error page?
auth: {
strategies: {
local: {
endpoints: {
login: {url: '/loginGod', method: 'post', propertyName: 'authenticationToken'},
user: {url: '/coordinators', method: 'get', propertyName: null}
}
}
},
redirect: {
home: '/coordenadores'
}
},
I've got the following auth configuration in my nuxt.config.js
auth: {
strategies: {
google: {
client_id: process.env.GOOGLE_KEY,
codeChallengeMethod: '',
scope: ['profile', 'email'],
responseType: 'token id_token'
}
},
redirect: {
login: '/login',
logout: '/logout',
home: '/',
callback: '/welcome'
},
rewriteRedirects: false
},
router: {
middleware: ['auth']
},
serverMiddleware: [
{ path: '/db', handler: '~/api/db.js' },
],
This setups frontend authentication, so all my .vue pages are protected. Besides that, I've got some serverMiddleware, like in my api/db.js
const app = require('express')()
app.get('/fields/:schema', async (req, res) => {
var result = []
// some logics here
return result;
})
Request to this resource is not protected by any auth, but I've noticed in Network tab in browser, that all request made by $axios.$get('db/fields/some_schema') from my .vue pages set some Google cookie, like
auth.strategy=google; auth._token.google=Bearer...
which is not used in my serverMiddleware api/db.js
Does Nuxt.js has some out of box way to setup Google authentication for server middleware? What is the right way to setup it?
I had to use this nuxt config
auth: {
strategies: {
google: {
clientId: 'to be added',
clientId: '<your cliendID here>',
codeChallengeMethod: '',
responseType: 'code',
endpoints: {
token: 'http://localhost:8000/social-login/google/',
userInfo: 'http://localhost:8000/auth/user/'
},
},
}
},
and implement backend token and userInfo endpoints
I am attempting to get Nuxt.js to work with cookie authentication. I am using nuxt-auth with cookie setting. Laravel Backend with Passport.
The reason I need to use Cookies is because I plan on having the nuxt project be on my main domain name (with login) and then having app.mydomainname.com for the actual application. The main website has public facing pages that use authentication as well.
Here is my config for nuxt.js for nuxt-auth:
auth: {
local: false,
redirect: {
login: "/login",
logout: "/login",
callback: "/login",
home: false,
},
strategies: {
cookie: {
token: {
property: "data.access_token",
},
user: {
property: "data",
},
endpoints: {
login: {
url: "v1/auth/login",
method: "post",
propertyName: "access_token",
},
logout: { url: "/v1/auth/logout", method: "delete" },
user: { url: "/v1/settings", method: "get" },
},
},
},
},
Login works fine, but then the cookie does not set when I look in my editthiscookie chrome plugin, thus the call to /settings does not work:
As you see the cookie is just being set to true and not the access token.
Any help with the configuration would be helpful.
Thanks
Figured it out. I had to set set required: true and type: "Bearer" in the token config.
So it looks like this now:
auth: {
redirect: {
login: "/login",
logout: "/login",
callback: "/login",
home: false,
},
strategies: {
local: false,
cookie: {
token: {
property: "data.access_token",
required: true,
type: "Bearer",
},
user: {
property: "data",
},
endpoints: {
login: {
url: "v1/auth/login",
method: "post",
},
logout: { url: "/v1/auth/logout", method: "delete" },
user: { url: "/v1/settings", method: "get" },
},
},
},
},
I am trying to resolve this issue past few weeks. I followed couple of series. One on youtube, and one on codecourse. Both of them showed the right way to authenticate user, but once the user is logged in. Login route is still accessible. I will try to give as much information i can.
This is my nuxt.config.js
auth: {
plugins: ["~plugins/auth.js"],
strategies: {
local: {
endpoints: {
login: {
url: "auth/login",
method: "post",
propertyName: "meta.token"
},
user: {
url: "auth/me",
method: "get",
propertyName: "data"
},
logout: {
url: "auth/logout",
method: "post"
},
redirect: {
login: "/auth/login",
logout: "/",
home: "/",
callback: "/"
},
watchLoggedIn: true,
rewriteRedirects: true
}
}
}
},
Here is my login.vue
export default {
middleware: ["guest"],
auth: "guest",
name: "login",
data() {
return {
form: {
email: "",
password: ""
}
};
},
methods: {
async login() {
await this.$auth.loginWith("local", {
data: this.form
});
this.$router.push({
path: this.$route.query.redirect || "/dashboard"
});
}
}
};
It's still accessible after login.
Your configured it wrong. Its all described in the docs. For example middleware
There is no such thing as
middleware: ["guest"],
as in your code. Middleware called auth as you can see in docs. So you need to set it either
Setting per route:
export default {
middleware: 'auth'
}
Globally setting in nuxt.config.js:
router: {
middleware: ['auth']
}