Closed jhlabs closed 7 years ago
dortamiguel
commented
7 years ago In your backend you have to add on the config, in the "authentication": {} object, your oauth settings.
Also don't forget to add the redirect url on success login on the provider (Google in this case)
I also think that this problem doesn't belong to this repo, better try this one https://github.com/feathersjs/feathers-authentication
dortamiguel
commented
7 years ago Also, this code helps me a lot using authentication with feathers-vuex, maybe you can use it.
<template lang='pug'>
#app
navbar(v-show='show_nav')
#app_content
router-view.view(
v-if='check_meta()'
v-bind='{ current_user }'
)
</template>
<script>
import './app.sass'
import Navbar from './ui/navbar/navbar.vue'
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
name: 'app',
components: { Navbar },
data() {
return { show_nav: true }
},
computed: {
...mapState('auth', ['user']),
...mapGetters('users', { getUserInStore: 'get' }),
current_user() {
if (this.user) return this.getUserInStore(this.user._id)
},
},
methods: {
...mapActions('users', { getUser: 'get', patchUser: 'patch' }),
fetch() {
this.getUser(this.user._id)
},
check_meta() {
const { auth, hide_nav } = this.$route.meta
// Hides the navbar if necessary
if (hide_nav) this.show_nav = false
else this.show_nav = true
// Wait until user is ready for auth required routes
if (auth === true) {
if (this.current_user) return true
else return false
} else return true
},
},
watch: {
user() {
if (this.user) this.fetch()
},
},
async created() {
try {
const not_oauth_browser = !!navigator.userAgent.indexOf('cordova')
if (not_oauth_browser) {
await this.$store.dispatch('auth/authenticate')
// Redirect from home to profile select
// if (this.$route.path === '/')
// this.$router.replace({ name: 'User' })
}
} catch (error) {
if (
error.message.includes('Could not find stored JWT') ||
error.message.includes('_id is missing from current user.')
) {
const token = localStorage.getItem('feathers-jwt')
if (token) {
localStorage.removeItem('feathers-jwt')
document.cookie =
'feathers-jwt=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/'
location.reload()
}
} else {
console.error(error)
}
}
},
}
</script>
jhlabs
commented
7 years ago @ellipticaldoor thank you! I eventually got it to work with the help of this issue https://github.com/feathersjs/feathers-authentication/issues/493. The key for me was to use the server to call the '/auth/google' link and use the handler provided by @marshallswain. I also had to activate the Google + API in their console, which caused an error before.
Instead of using the parameter extraction that is recommended in the linked post, you can simply use this.$route.query.token to handle the final token with vue-router.
jappyjan
commented
4 years ago hello,
i'm having kinda the same problem (using github, but i don't think this makes a difference)...
how do i implement github/oauth flow? gui (vue) redirects to localhost:3030/oauth/github github is set to redirect on success to gui/oauth/github/callback
and then?
Thanks for this fantastic plugin!
I cannot seem to properly construct the OAuth login flow with Google and hope the explanation to this issue could be helpful for many.
Steps to reproduce
I have connected the feathers-vuex plugin with the client as in the docs here:
On the server side I have created local and oauth authentication with the feathers generator. I added my google client secret and ID in the config.
Now I have created a sign up page:
The local registration works flawlessly. For the oauth registration all that should be required on the client side is to link to the relative path '/auth/google' that has been created by feathers:
Expected behavior
The user should be directed to the Google OAuth page and then redirected to the pre-specified callback URL.
Actual behavior
If I use a relative path, the browser directs to a blank page with the given URL. When I change the URL to direct to the same URL on the server (by changing the port), the user is redirected to the Google OAuth page. However, the redirect does not seem to work back to the client.
I wonder which URL is the correct one (client or server side), and how the flow can be implemented correctly. Thanks a lot for your help!
System configuration