File structure for user authentication stuff

help
1

Hi all,

I read in the docs that theres a recommended structure but no mention of where authentication files should be located? I.e. login logic and html etc.

Should it be under import/startup/client or server? or split logic there and html under import/ui/pages etc.

In the example, useraccounts-config.js is recommended under import/startup/client folder but Account.onCreateUser() could only work in the import/startup/server folder. I have AccountsTemplates.configure({ sitting in the recommended folder though.

Im using Accounts.Template for login and sign up public routes (in routes.js).

Thanks!

2

Hi mthh,
I see you’ve been a member here for a while but wanted to ask you if you were new with developing in Meteor.
I am asking you this as I intend to answer your question and want to tune my answer in report with your Meteor experience.

3

Hi @paulischca, indeed i used it …though its pre-change in the file structure and many things have changed since.
Was reading the docs, and testing and wondered if makes sense to check around, lest I miss anything important. Im also trying to split the files per the import rules etc.
Perfectly understand where your coming from, not professional programmer here, purely for hobby if that makes sense.

4

It surely makes sense :). I think the best way would be for you to start wit a ‘create app’ which I suppose you do already.
From all my heart I say…just do React instead of templates … but this is personal opinion.

Simply put, you need to have these (‘app’ is your root folder):

   app/client
   app/client/main.css
   app/client/main.html
   app/client/main.js   // here you import import '../imports/startup/client/' and import '../imports/ui'

“In the example, useraccounts-config.js is recommended under import/startup/client” - this is right and you should have it imported in app/client/main.js

" Account.onCreateUser() could only work in the import/startup/server folder" - that is right. You can put it under app/server directly or have it put in app/imports/startup/server but need to make sure this folder has an index.js that imports each file in this folder and it is being imported by main.js under app/server

Logic: you build all your login/signup/renew password etc in the client side calling methods which run server side. When a user is being created, a server side routine (onCreateUser.js)will further process your user.
client - all your logic for what the user experiences. If you have routes like example.com/singin, example.com/signup, in those templates you build the entire login logic.

server - listen to when a user is being created and do further processing (e.g. get the image from FB profile and save it to a CDN, retrieve the CDN url of the image and save it under user’s profile avatar)

For testing, you could do so:

  1. Put onCreateUser.js under app/server directly
  2. Write this simple code:
import { Accounts } from 'meteor/accounts-base'

Accounts.onCreateUser((options, user) => {
   console.log({ options, user })
   if (user.emails?.[0]) {
     user.hasEmail = true
   }

   return user
})

Check your server console when creating a new user.

“sign up public routes (in routes.js).” - routes should stay unders app/imports/startup/client. In client startup you have things that should be running after the JS bundle is processed, before the DOM is being constructed.

5

Furthermore, as a general structure, you have
app/client and
app/server

Both folders contain a main.js file in which you import all things that are related to one or another.
For example in app/server/main.js you should have at the minimum:

import '../imports/startup/server' // in this folder you should have an index.js file (which is being imported by default when you don't specify a file but the folder that contains the file)
// in this index.js you import all other files related to startup server side (e.g browser policy, services configuration (like Facebook and Google)
// Accounts configuration/behavior like email policy, password validity), Push server initialization. Here you should also have a file that imports all the methods and publications.
import './onCreateUser'

Then in your app/package.json you should have:

{
 // ......
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    // "testModule": "tests/main.js"
  },
}