0

I've been adding user account functionality into a Meteor + React App.

For the login, using Meteor.loginWithPassword, I'm getting no indication of any special exception or crash in the server log. Yet, the callback never gets invoked.

The Login Request

Seen above "Login Requested" will post in the console.

But "Login Processed" never does, showing that the callback is never executed.

accounts-ui as well as accounts-passwords have been added to meteor.

Subscriptions still work, so I'm not sure what's causing this to fail.

I'd at least expect some exception to get thrown on the server side as well, but I'm getting no apparent information on what's happening. Here is my React code:

import React from 'react';
import Meteor from 'meteor/meteor'
import { Input, Button } from 'react-onsenui'

class LoginPage extends React.Component{
    constructor(props) {
        super(props);

        this.state = {
          username: "",
          password: "",
        };
    }

    loginRequest(){
        console.log("Login Requested")
        Meteor.loginWithPassword(this.state.username, this.state.password, function(error){
            console.log("Login Processed");
        });
    }

    render(){
        return (
            <form className="LoginPage">
                <p>
                <Input
                    value={this.state.username} float
                    onChange={(event) => { this.setState({username: event.target.value})} }
                    modifier='material'
                    placeholder='Username' />
                </p>
                <p>
                <Input
                    value={this.state.password} float
                    onChange={(event) => { this.setState({password: event.target.value})} }
                    modifier='material'
                    placeholder='Password' />
                </p>
                <Button onClick={this.loginRequest.bind(this)} modifier="large--cta">Login</Button>
            </form>
        )
    }
}

export default LoginPage;
Ondrej K.
  • 8,841
  • 11
  • 24
  • 39
Pavan Shah
  • 1
  • 1
  • 1. you don't need accounts-ui for meteor react app. It is only for blaze. – ivan133 Feb 02 '19 at 07:27
  • 2. So what happend if you call "loginRequets"? Nothing at all? Double check that you call it from the react code + try to call Meteor.loginWithPassword directly form developer console – ivan133 Feb 02 '19 at 07:29
  • You were right! Going through the developer console worked. Therefore, it wasn't something I could call from react code. There's definitely a misunderstanding of how I'm understanding things. How would I know if I can call something from react code or not? – Pavan Shah Feb 02 '19 at 18:31
  • You should be able to call all js function form react code Maybe if you post you react code I can help you most common mistake is to call the function instead of passing i Or you can try to replace your loginRequest function with other one and see if it is called – ivan133 Feb 02 '19 at 18:53
  • I posted the code above. What do you mean replacing loginRequest function with another? Do you mean a separate function outside of the class? – Pavan Shah Feb 02 '19 at 19:41
  • Update - I've tried different ways to call the function. What I am finding is that I get an error. 'TypeError: Meteor.loginWithPassword is not a function. (In 'Meteor.loginWithPassword(this.state.username, this.state.password, this.loginResult.bind(this))', 'Meteor.loginWithPassword' is undefined)' I'm not sure why that would happen, since this is client-side code, I am importing Meteor, and I have added the accounts-password package. – Pavan Shah Feb 02 '19 at 22:52

2 Answers2

1

I believe the difference is between default import/export and named import/export. Here's an explanation: When should I use curly braces for ES6 import?

The first (without brackets) would mean a default import. The second is a named import, which is matching the exact name of the export.

This matches the line 

api.export('Meteor');

Which can be found in the core Meteor package: https://github.com/meteor/meteor/blob/master/packages/meteor/package.js

There is also an explanation of module info on the Meteor docs: https://docs.meteor.com/packages/modules.html#Basic-syntax

You may also be interested in this thread on the Meteor forums: https://forums.meteor.com/t/how-do-you-know-the-name-to-import/26718

jFrymann
  • 45
  • 1
  • 7
0

Ok I finally solved this problem. Every time I think I understand Javascript, it's clear I do not.

The problem stems from how I imported Meteor. I changed

import Meteor from 'meteor/meteor'

to

import { Meteor } from 'meteor/meteor'

I don't know why this is the case, so someone please explain so I don't make this error again.

Pavan Shah
  • 1
  • 1