This is just a thought for now. There's more to do before Credible itself is ready, but I wouldn't mind thinking about it... A "Credible.js" package that drops into a frontend project and...
...and what?
Present approach (using Axios, Vue.js, Vue-Router and Vuex) is to... create store objects for tokens in Vuex, that are used by an interceptor in Axios, and the existence of which is checked by Vue-Router before rendering content.
Ideally, a Credible.js plugin would have no dependency on Vue, Vue-Router and Vuex... Axios is more debatable, but also... no.
And then the issue is... it isn't easily integrated into those.
It should:
If an access-token exists in memory, attach this to all appropriate API calls
Actually... no... because the user might have a very different API they use the access token on, this is actually not appropriate. Scratch that.
Store a resultant refresh-token in the browser... (if remember me)
Return an access token
Refresh from refresh-token by calling the API
It should also...
Expose information about refresh-token: expiry
User should be able to import Credible from 'credible' and utilise these features. E.g.
import Credible from 'credible'
session = new Credible({ config })
session.login(login: 'some_user', password: 's0me_pa$$word')
// should return access-token (will also set refresh-token)
session.refresh
// should return new access-token (will also set new refresh-token)
// fails if no refresh-token
session.accessToken
session.refreshToken
session.info
// should return decoded session info from access-token
config might accept settings like refreshable: true (possibly overridable if 'remember me: false', right?) Oh, and uhmm... I guess baseUrl: 'credible.someurl.com/auth' to allow user to set custom provider.
Reintegration with current setup
Given the above... which would store a refresh-token in browser and an access-token in memory...
...we wouldn't need to add authentication logic to the Vuex store anymore (this all sounds like it would be handled). Credible would just need to be imported by: Axios, Vue.js, Vue-Router so that:
Axios could base an interceptor on the Credible session object's state.
Vue.js could access session info.
Vue-Router could use that session info to redirect where appropriate.
We'd be right back where we are... just with session management extracted.
And... is this pretty-much react-compatible too? Well... it's decoupled from Vue. It's state management would be separate... Yeah, I see no reason why this wouldn't just as easily drop into a React project, or other. I mean this should also work with server-side JS too... no, actually: one minor tweak though - storage of refresh-token.. would need adapted.
This is just a thought for now. There's more to do before Credible itself is ready, but I wouldn't mind thinking about it... A "Credible.js" package that drops into a frontend project and...
...and what?
Present approach (using Axios, Vue.js, Vue-Router and Vuex) is to... create store objects for tokens in Vuex, that are used by an interceptor in Axios, and the existence of which is checked by Vue-Router before rendering content.
Ideally, a Credible.js plugin would have no dependency on Vue, Vue-Router and Vuex... Axios is more debatable, but also... no.
And then the issue is... it isn't easily integrated into those.
It should:
If an access-token exists in memory, attach this to all appropriate API callsActually... no... because the user might have a very different API they use the access token on, this is actually not appropriate. Scratch that.
It should:
It should also...
User should be able to
import Credible from 'credible'and utilise these features. E.g.configmight accept settings likerefreshable: true(possibly overridable if 'remember me: false', right?) Oh, and uhmm... I guessbaseUrl: 'credible.someurl.com/auth'to allow user to set custom provider.Reintegration with current setup
Given the above... which would store a refresh-token in browser and an access-token in memory...
...we wouldn't need to add authentication logic to the Vuex store anymore (this all sounds like it would be handled). Credible would just need to be imported by: Axios, Vue.js, Vue-Router so that:
We'd be right back where we are... just with session management extracted.
And... is this pretty-much react-compatible too? Well... it's decoupled from Vue. It's state management would be separate... Yeah, I see no reason why this wouldn't just as easily drop into a React project, or other. I mean this should also work with server-side JS too... no, actually: one minor tweak though - storage of refresh-token.. would need adapted.
But yeah, I think a solid idea.