Useraccounts basics

help
1

Hi all - I’m a noob on my first try with useraccounts and I could use some help just getting the basics working.

So far:

  • I removed the accounts-ui package and all related code.
  • I added useraccounts:materialize.
  • I added gadicc:blaze-react-component (I’m using react and I think useraccounts is set up for blaze?)
  • I put <Blaze template=“atForm”/> in my header.

This pretty much works. I got the sign in form, clicked the register button, registered a user, and logged in.

So, here’s my first problem: I can’t log out.

I was expecting atForm to turn into a logout button, but it just disappears. I poked around the page and found an empty div of class at-form.

What am I missing?

2

atForm just does login/signup forms

If you use atNavButton it will switch the “log in” button to a “log out” button
Which will require you to configure your login routes:

Or you can try using {{> loginButtons}} which I believe does both?

3

Thanks! I’m trying to avoid routes for now. But now I’ve got basic register / log in / log out functionality by showing atForm on my landing page and showing atNavButton (and not showing atForm) on the app itself.

I’d like to add the following configuration. Where does this code belong?

AccountsTemplates.configure({
defaultState: “signUp”,
showForgotPasswordLink: true,
sendVerificationEmail: true,
enforceEmailVerification: true,
});

Should I also use the below or something similar?

import { AccountsTemplates } from ‘meteor/useraccounts:core’;

4

The documentation is really unclear.

You want the regular Accounts module":

import { Accounts } from 'meteor/accounts-base'
Accounts.config({
    //...
})

Accounts is an instance of AccountsClient or AccountsServer both of which inherit from AccountsCommon, so all the methods on AccountsCommon in the docs are available on the Accounts Module.

Same goes for methods on AccountsClient for the Accounts module on the client
and for methods on AccountsServer for the Accounts module on the server

Once you understand that everything ends up on Accounts through inheritance, it gets much easier to understand the docs


1 Like
5

Thank you. It turns out you don’t need to import anything to run AccountsTemplates.configure({ }).

I put this in client/main.js:

AccountsTemplates.configure({
  showForgotPasswordLink: true,
  showLabels: false,
});

And I put this in server/main.js:

AccountsTemplates.configure({
  sendVerificationEmail: true,
  enforceEmailVerification: true,
});

Everything is working except the emailed links. I receive the emails, but:

  • the register / email verification link doesn’t change emails[0].verified to true.
  • the forgot password link just brings you back to the landing page.

It seems like there might be some basic useraccounts setting that I’m missing, but I don’t see anything in the docs.

I’m running all this on localhost, so that might be the issue, but email verification worked fine on localhost with accounts-ui.

Anybody have any ideas?

1 Like
6

ok I ‘fixed’ the problem. I re-installed accounts-ui and the verification links started working. So, to be clear, I’m running both accounts-ui and useraccounts. I’m only calling the useraccounts templates. I don’t think you’re supposed to do that, but it doesn’t seem to cause any problems in my case.

7

Regarding the email verification link not working, I’ve got the very same problem right now. I could reproduce that it works, when I meteor add accounts-ui. But the confirmation dialogue I get displayed is clearly from the accounts-ui package. That’s not what I want, as I’m using useraccounts:bootstrap. So I’d be interested to know what I have to configure to make it work without accounts-ui, too. The documentation is lacking that part.

8

Same here. I used css to make the accounts-ui dialogues fit in better:

#login-buttons-reset-password-button, #just-verified-dismiss-button {
    ...
}

#login-buttons-reset-password-button:hover, #just-verified-dismiss-button:hover {
    ...
}

#reset-password-new-password-label {
    all: unset;
}

.hide-background {
    visibility: hidden;
}