[Solved] Passwordless Error due to error in the documentation

help
1

I am just wanting to test out the accounts passwordless package.
Am I missing something here… this is the error I am getting and my code beneath it.
Boiler plate stuff.

Uncaught TypeError: Cannot read properties of undefined (reading 'requestLoginTokenForUser')`

import { Accounts } from 'meteor/accounts-passwordless';
// ...
Accounts.requestLoginTokenForUser(
  {
    selector: email,
    userData: '',
    options: {},
  },
  (error) => {
    alert(error.reason);
  }
);
1 Like
2

Please make sure you’re calling it from client side only.

3

Yeah that’s from my react component.
Here is the whole snippet… strange.

This is a brand new project, just setting it up to try out the passwordless auth.
Not working.
I don’t have email setup, but expect it will just spit the email contents out in the server dev console.

The errors reads like I have the wrong Accounts imported or something.

import React, { useState } from 'react';
import { Meteor } from 'meteor/meteor';
import { Accounts } from 'meteor/accounts-passwordless';
import { Button, Text, TextInput, Title } from '@mantine/core';


export default function AuthPage() {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(Meteor.loggingIn());

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);

    Accounts.requestLoginTokenForUser(
      {
        selector: email,
        userData: '',
        options: {},
      },
      (error) => {
        alert(error.reason);
      }
    );
  }

  return (
    <div>
      <Title order={2} style={{ marginBottom: 8 }}>Authenticate User</Title>
      <Text
        style={{ marginBottom: 16 }}
      >
        Enter your email address and we will send you an email with a link to login.<br />
        If this is your first time, your account will be created, if you are returning it will log you in automatically.
      </Text>
      <form onSubmit={handleSubmit}>
        <TextInput
          name="email"
          placeholder="you@you.com"
          label="Your Email Address"
          type="email"
          onChange={({ target }) => setEmail(target.value)}
          value={email}
          style={{ marginBottom: 8 }}
          disabled={loading}
        />
        <Button
          loading={loading}
          loaderPosition="right"
        >Login / Sign Up</Button>
      </form>
    </div>
  );
};
4

What if you change it to

import { Accounts } from 'meteor/accounts-base';

It looks like something wrong with importing.
Sometime I saw meteor packages ordering causes some problem. I think the accounts-passwordless should be place below the accounts-base package in .meteor/packages file.

1 Like
5

So that worked… does this mean the documentation is off, or just the ordering in the packages file?

Thanks

6

Congrats! So what modification you made to make it works :slight_smile: I have no idea. Just sitting here and guessing

7

Oh sorry, I changed the import to use accounts-base instead of passwordless.

8

what about packages ordering? could you show your .meteor/packages content?

9

Looks like the package definition doesn’t export anything, either via api.export or using mainModule: meteor/package.js at master · meteor/meteor · GitHub

So the docs really shouldn’t show import { Accounts } from 'meteor/accounts-passwordless' like they do now.
At the very least they should have a “How to import and use” section at the top

2 Likes
10 
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base@1.5.1             # Packages every Meteor app needs to have
mobile-experience@1.1.0       # Packages for a great mobile UX
mongo@1.13.0                   # The database Meteor supports right now
reactive-var@1.0.11            # Reactive variable for tracker

standard-minifier-css@1.7.4   # CSS minifier run for production mode
standard-minifier-js@2.7.2    # JS minifier run for production mode
es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
ecmascript@0.16.0              # Enable ECMAScript2015+ syntax in app code
typescript@4.4.0              # Enable TypeScript syntax in .ts and .tsx modules
shell-server@0.5.0            # Server-side component of the `meteor shell` command
hot-module-replacement@0.4.0  # Update client in development without reloading the page

static-html@1.3.2             # Define static page content in .html files
react-meteor-data       # React higher-order component for reactively tracking Meteor data
email
webapp
accounts-passwordless
11

So there’s no accounts-base package. Interesting.

12

Yeah I noticed that too; guessing it is because when adding the accounts-passwordless it added that as a dependency.

1 Like
13

Hi, the docs are auto-generated (the API Box part) but it’s indeed not correct.

We can also re-export Accounts from passwordless package to avoid confusion.

2 Likes
14

Hi, I’ve implemented a way to override the module used in the API Box in the docs.

Now the docs are correct, you can check the PR with my changes here.

Updated doc page.

2 Likes
15

Amazing thanks!
Looks like you missed the other apibox:
Docs: accounts-passwordless - sendLoginTokenEmail should be imported from accounts-base by coagmano · Pull Request #11786 · meteor/meteor · GitHub

16

My bad, thanks :wink: It’s merged now.

2 Likes