0

I have a very strange issue. I have a login page in React where users can either Sign-Up or Login .

When the user signs up, I create a user in GUNjs. And when I login, it logins successfully. However, when I open the site in incognito mode and try to login with the same creds, it says that the user doesn't exist. I also have a peer server running. The peer server saves user's data, but still this happens.

My code:

decentralized_db.ts

  import GUN from "gun";
  import "gun/sea";
  import "gun/axe";

  export const db = GUN({
    peers: ["http://localhost:8765/gun"],
  });

  export const user = db.user().recall({ sessionStorage: true });

peerServer.js

gun = (Gun = require("gun"))({
  web: require("http").createServer(Gun.serve(__dirname)).listen(8765),
});

My React component: loginPage.tsx:

import { useState } from "react";
import { user } from "../decentralized_db";

export default function LoginPage() {
  const [userCred, setUserCred] = useState({
    username: "",
    password: "",
  });

  function login(event: any) {
    event.preventDefault();
    user.auth(
      userCred.username,
      userCred.password,
      ({ err }: any) => err && alert(err)
    );
    console.log(user);
  }
  function signup(event: any) {
    event.preventDefault();
    user.create(userCred.username, userCred.password, ({ err }: any) => {
      if (err) {
        alert(err);
      } else {
        login(event);
      }
    });
  }

  function handleChange(event: any) {
    let name = event.target.name;
    let value = event.target.value;

    let clonedState: any = { ...userCred };
    clonedState[name] = value;

    setUserCred(clonedState);
  }

  return (
    <form>
      <label htmlFor="username">Username</label>
      <input
        onChange={handleChange}
        name="username"
        value={userCred.username}
        minLength={3}
        maxLength={16}
      />

      <label htmlFor="password">Password</label>
      <input
        onChange={handleChange}
        name="password"
        value={userCred.password}
        type="password"
      />

      <button className="login" onClick={login}>
        Login
      </button>
      <button className="login" onClick={signup}>
        Sign Up
      </button>
    </form>
  );
}
Pranava Mohan
  • 533
  • 2
  • 8
  • 18

1 Answers1

1

@pranava-mohan hey this is a bug, there was a race condition in the profile syncing - the login would check credentials before the profile finished loading.

To confirm this is the same bug as you are experiencing: Try to click login multiple times on the other page. Does it login on later attempts, even if you changed nothing? Then this was the bug.

Working to have this fixed in future versions. Until then, the best place to get help with bugs is http://chat.gun.eco we reply faster there.

Sorry about that! Please comment if it winds up being something else.

marknadal
  • 7,534
  • 4
  • 25
  • 22
  • 1
    For some reason, the issue for me got fixed randomly. I don't know why, but the same code is now working fine. Previously, the user was not getting authenticated in incognito window, but it is now getting authenticated. Thanks Mark Nadal for your answer, keep changing the web! – Pranava Mohan Sep 19 '21 at 01:12