Using accounts-js in Vulcan.js – looking for contributors

[SachaG]

First of all great work, this looks like a really great successor to Meteor Accounts!

We are considering using Accounts-JS for Vulcan. I was wondering if anybody here would be interested in contributing and helping us with the integration?

Sorry, I know this isn't really an "issue" so feel free to close this if you think it's not relevant :)

[TimMikeladze]

Hi Sacha,

Certainly are interested in collaboration. Do you have any ideas on what needs to be done for integration?

Vulcan is built on top of Meteor right? We have a meteor adapter package which hasn't been updated for some time nor folded into this mono repo. https://github.com/accounts-js/meteor-adapter it may be a good starting place.

Browsing through the Vulcan documentation I see a GraphQLSchema.addSchema function. You could use @accounts/graphql-api to get a graphql module (https://github.com/Urigo/graphql-modules) and then supply that schema to Vulcan's graphql server.

[SachaG]

Yes, it's built on Meteor. Backwards-compatibility with the existing accounts system would be a big requirement. I was looking at @lorensr's package actually but he told me it was better to use Accounts-js directly.

I think integrating the GraphQL accounts schema wouldn't be that hard. We have our own addSchema thing like you said, but we're also migrating to Apollo Server 2.0 which has some schema-stitching features as well, if I'm not mistaken. But yeah the goal would be to do everything via the GraphQL layer, and not use DDP at all anymore.

One part that has always been tricky when dealing with accounts is passing the current user to the SSR process. Since Meteor uses localStorage we've always needed to add some hacks to copy the token in a cookie first. Does Accounts-js help at all with that aspect of things?

And finally there's also the whole UI side of thing (sign in, sign up components, etc.), as well as the HoCs/renderProps/context/etc. or whatever method is used to give the client access to all the log in, sign up, etc. mutations. I think for that we would probably build everything using pre-existing Vulcan components and patterns, but the existing examples here could be a good starting point.

Also if you're curious about Vulcan I'd be happy to give you a quick demo one of these days :)

[TimMikeladze]

accounts-js doesn't currently support cookies but I believe we can add it by implementing our TokenStorage interface and with minimal changes in the codebase.

As for the UI, I've been very slowly working on react integration on a branch in this repo which has the components and utility functions you mentioned.

Thanks for offering a demo, I'll give the documentation a more thorough look over and let you know if I have any questions.

p.s. you can also join our slack if you want to discuss in more real time.

Example of accounts react and apollo

```js import './index.css'; import { accountsApollo } from '@accounts/apollo'; import { Accounts, AccountsConsumer, AccountsProvider, Auth, withAuth } from '@accounts/react'; import AccountsMaterialUI from '@accounts/react-material-ui'; import { InMemoryCache } from 'apollo-cache-inmemory'; import { ApolloClient } from 'apollo-client'; import { ApolloLink } from 'apollo-link'; import { HttpLink } from 'apollo-link-http'; import * as React from 'react'; import { ApolloProvider } from 'react-apollo'; import * as ReactDOM from 'react-dom'; import { BrowserRouter, Link, Route } from 'react-router-dom'; import registerServiceWorker from './registerServiceWorker'; const accounts = accountsApollo({ uri: 'http://localhost:4000', }); const client = new ApolloClient({ cache: new InMemoryCache(), link: ApolloLink.from([ accounts.link, new HttpLink({ uri: 'http://localhost:4000', }), ]), }); let UserInfo: any = ({ user }) =>

{user.id}

; UserInfo = withAuth()(UserInfo) as any; const Home = () => (

Home page Sign in

); const MyAccount = () => ( {({ user }) => user &&

ID: {user.id}

} ); const App = () => ( props.history.push('/')} > <> } /> ); export default App; ReactDOM.render( as any, document.getElementById('root') as HTMLElement); registerServiceWorker(); ```

[Aetherall]

I did some work about it a long time ago, It is still available on the next branch if you want to check that out :)

I apologize for not being contributing as I would like to, but I am looking forward to contribute again ! Cheers ;)