ot | Emma still sucks at coding and then need help again

[glossy phoenix]

Hey c:

hi @stone whale, hru? 😭

[stone whale]

howdy

[glossy phoenix]

what does that mean 😭

[wide pawn]

how are you doing

But 'Murican

[stone whale]

yes that

[glossy phoenix]

@stone whaledo you know react and next js?

[stone whale]

a bit yeah, what do you need help with?

[glossy phoenix]

when I click to register I have that ):

[stone whale]

you're registering a route?

[glossy phoenix]

I don't have any fucking idea

[stone whale]

well what does the code do at this line

that error is very generic so i can't help without more details

[wide pawn]

you can copy that and paste it here

[glossy phoenix]

ik

[wide pawn]

don't do https on localhost

[glossy phoenix]

bro

[wide pawn]

unless you have SSL setup, ofc

[glossy phoenix]

I just copied and past a YT tutorial

I don't have any fucking idea of what I did

[wide pawn]

yeah

[glossy phoenix]

but I have no choice

cause idc about if I get 0

[wide pawn]

then make it

http://localhost:3001/register

[glossy phoenix]

but I'm in a team

[stone whale]

and the other person has no clue either?

[glossy phoenix]

and if I don't do it they will have 0 too

[glossy phoenix]

they told me to search on internet

[stone whale]

it's good you're working in a team at least, you'll very rarely work alone when you've graduated

[wide pawn]

... so they don't have any clue either

[glossy phoenix]

I think that the one who answered me does, but don't want to help me

[glossy phoenix]

lmao, I stop this school after this project

[stone whale]

already?

[glossy phoenix]

I don't like it so yes

[stone whale]

ok 🙂

[glossy phoenix]

I don't like to do programation every day

[stone whale]

already know what you will do next?

[wide pawn]

programation

[glossy phoenix]

I want to work in motorsport

[wide pawn]

oooo

[glossy phoenix]

coding?

[stone whale]

programming

[wide pawn]

programation sounds cool tho

[stone whale]

that's odd, it looks like you have the syntax right

[glossy phoenix]

don't know precisely but in motorsport

[stone whale]

no

[wide pawn]

@glossy phoenix did you try doing this

[stone whale]

you mixed up baseURL with url

your url to register is just '/register'

[glossy phoenix]

I copied and past a video

[stone whale]

while the baseURL is 'https://localhost:3001/'

[glossy phoenix]

and on the video it works

[wide pawn]

yeah, but you can edit it

[stone whale]

can you try that?

[glossy phoenix]

try what?

[wide pawn]

can you paste it as a codeblock here

[stone whale]

what i told

ye, the const register block

[glossy phoenix]

I didn't understand what you said

[glossy phoenix]

import { useState } from "react"
import NavBar from "../comps/NavBar";
import axios from 'axios';

export default function Register() {

    const [registerUsername, setRegisterUsername ] = useState('');
    const [registerPassword, setRegisterPassword ] = useState('');

    const register = () => {
        axios({
            method: "post",
            data: {
                username: registerUsername,
                password: registerPassword
            },
            withCredentials: true,
            url: "http://localhost:3001/register"
        }).then((res) => console.log(res)).catch((err) => console.log(err));
    }

    return (
        <div>
            <NavBar></NavBar>
            <div>
                {console.log(registerUsername)}
                <h1>Inscription</h1>
                <input type="text" name="username" placeholder="Pseudo" onChange={e => setRegisterUsername(e.target.value)}></input>
                <input type="password" name="password" placeholder="Mot de passe" onChange={e => setRegisterUsername(e.target.value)}></input>
                <button onClick={register}>Terminer</button>
            </div>
        </div>
        
    )
}

[wide pawn]

noice

[stone whale]

you have url: "https://localhost:3001/register"

[glossy phoenix]

this is register

[stone whale]

it seems you need url: "/register" instead

and baseURL: "https://localhost:3001"

(in the docs of this axiom thingy they always use https 🤷‍♂️ )

[glossy phoenix]

:O

[stone whale]

yay

[glossy phoenix]

thx guys

[stone whale]

you're welcome !

[glossy phoenix]

you are the best <3

[wide pawn]

noice

Reb is amazing

[glossy phoenix]

you are amazing too

[stone whale]

i like helping you, cause often i have no clue about the stuff lol

[glossy phoenix]

lmao

can't be worst than me

[stone whale]

also i lied, i've never done react nor nextjs

[wide pawn]

I'm ngl, not much of a programmer

[stone whale]

but it doesn't matter

[glossy phoenix]

https://www.youtube.com/watch?v=WYHQP9lQgD8&t=1338s I can continue the video thx to you guys

[wide pawn]

I only know basic docker compose + extremely basic networking

[glossy phoenix]

xD

[stone whale]

hf

[glossy phoenix]

I actually want to die

cause I'll have to do the frontend too

[stone whale]

i wish i had good frontend to do at work

[glossy phoenix]

and I don't have any clue about how to do it with react and next

[glossy phoenix]

you can do mine if you want lmao

[stone whale]

i have to do a frontend for a webapp, without using html. quite cumbersome

[glossy phoenix]

[stone whale]

lol

[wide pawn]

(this is why FOSS UI sucks /jk)

[glossy phoenix]

my frontend is just a login page and a registration page yk xD

[stone whale]

basically every component is hand drawn at some point

if i want to add a button, it basically takes a white canvas
then goes: ok so we will choose this colour then draw a rectangle of this size at this position, then we change to this colour to draw a text of this dimensions at this position then on that rectangle we drew we will add a listener so that when we click on it it does this, if we hover it does this etc.

it's very heavy to write

rather than <input type="button" class="theClassThatWillHandleTheColourAndDimension" listener1="function1" listener2="function2">

[glossy phoenix]

hey!

it's me, again xD

why is this still empty?

[stone whale]

where do you push data to your database

[glossy phoenix]

still no clue

here I think

[stone whale]

you're not querying the proper table lol

oh no you just called your database legin_register, my bad.

[glossy phoenix]

didn't want to do it

but

I did

so

[stone whale]

you've seen the Utilisateur créé avec succès message?

[glossy phoenix]

instead of creating a new one

[glossy phoenix]

no

[stone whale]

so what does it do when you call this new /register route of yours with the proper parameters

what's the result

[glossy phoenix]

wdym

[stone whale]

you have called this route to expect an entry in your database right

[glossy phoenix]

maybe

I guess

[glossy phoenix]

@stone whalewhat am I supposed to do then?

[stone whale]

well you need to make sure your register route is called, is your form calling it

[glossy phoenix]

how? 🥲

I don't know anything about that

[stone whale]

send the code for your form that should call the route 🙂

[glossy phoenix]

import { useState } from "react"
import NavBar from "../comps/NavBar";
import axios from 'axios';

export default function Register() {

    const [registerUsername, setRegisterUsername ] = useState('');
    const [registerPassword, setRegisterPassword ] = useState('');

    const register = () => {
        axios({
            method: "post",
            data: {
                username: registerUsername,
                password: registerPassword
            },
            withCredentials: true,
            url: "/register"
        }).then((res) => console.log(res)).catch((err) => console.log(err));
    }

    return (
        <div>
            <NavBar></NavBar>
            <div>
                {console.log(registerUsername)}
                <h1>Inscription</h1>
                <input type="text" name="username" placeholder="Pseudo" onChange={e => setRegisterUsername(e.target.value)}></input>
                <input type="password" name="password" placeholder="Mot de passe" onChange={e => setRegisterPassword(e.target.value)}></input>
                <button onClick={register}>Terminer</button>
            </div>
        </div>
        
    )
}

[stone whale]

right, what happens in your network tab of the browser dev tools when you click on the button

[stone whale]

when you choose one of them register calls, like the last one on your pic, what's in there? parameters, result etc

also, anything in the console tab?

[stone whale]

no, i'll need the payload, the response as well

and the console tab

[glossy phoenix]

what's the playload?

[stone whale]

there's a tab called payload in the request

on your last screen

the pay (not play) load is what you send alongside the request, basicallyu the parameters

[glossy phoenix]

where

oh

mb

[glossy phoenix]

@stone whale sry but I need to finish that today :c

this is the last time I will ask for your help 😭

[stone whale]

then give me what i ask for 🙂

[glossy phoenix]

here!

[stone whale]

.

[glossy phoenix]

didn't change since the beggining

[stone whale]

and the response?

[glossy phoenix]

where?

I don't see anything called reponse

[stone whale]

same, in the request, next to payload

[glossy phoenix]

sry

[stone whale]

hmm it returns the page..

you're running a server right? what's on its console

[glossy phoenix]

sry my parents were back home

[stone whale]

put some console.log on your server function that should do the work of executing the sql queries, so we are sure we pass in every block

[glossy phoenix]

ok

I tried to put all in a const but doesn't work /:

[stone whale]

wdym

[glossy phoenix]

that

app doesn't work

[stone whale]

no just put console.log to check we're executing the stuff inside

[glossy phoenix]

still doesn't work

[stone whale]

no

copy the code pls

[glossy phoenix]

const express = require('express');
const boddParser = require('body-parser');
const cors = require('cors');
const passport = require('passport');
const expressSession = require('express-session');
const cookieParser = require('cookie-parser');
const bcrypt = require('bcrypt');
const db = require('./db');

const app = express();


app.use(boddParser.json());
app.use(boddParser.urlencoded({ extended: true }));
app.use(expressSession({ secret: 'mySecretKey', resave:false, saveUninitialized: false }));

app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true
}));

app.use(cookieParser('mySecretKey'));

app.use(passport.initialize());
app.use(passport.session());



app.get('/', (req, res) => {
    res.send('Hello World')
})


app.post('/register', (req, res) => {
    const username = req.body.username;
    const password = req.body.password;

    const query = "INSERT INRO account (`username`, `password`) VALUES (?, ?)";
    const query2 = "SELECT * FROM account WHERE username = ?";

    db.query(query2, [username], (err, result) =>{
        if(err) {throw err;}
        if(result.length > 0) {
            res.send({message: "Ce nom d'utilisateur existe déjà"})
        }
        if(result.length === 0) {
            const hashedPassword = bcrypt.hashSync(password, 10);
            db.query(query, [username, password], (err, result) => {
                if(err) {throw err;}
                res.send({message: "Utilisateur créé avec succès"})
            })
        }
    })
});

app.listen(3001, () => {
    console.log('Server started on port 3001');
})

[stone whale]

app.post('/register', (req, res) => {
    const username = req.body.username;
    const password = req.body.password;

    const query = "INSERT INRO account (`username`, `password`) VALUES (?, ?)";
    const query2 = "SELECT * FROM account WHERE username = ?";

  console.log('in the register route');
    db.query(query2, [username], (err, result) =>{
  console.log('in the select query');
        if(err) {throw err;}
        if(result.length > 0) {
  console.log('already found that user name');
            res.send({message: "Ce nom d'utilisateur existe déjà"})
        }
        if(result.length === 0) {
  console.log('about to use the insert query');
            const hashedPassword = bcrypt.hashSync(password, 10);
            db.query(query, [username, password], (err, result) => {
                if(err) {throw err;}
  console.log('insert query executed just fine');
                res.send({message: "Utilisateur créé avec succès"})
            })
        }
    })
});

[wide pawn]

I think ChatGPT would be the perfect consultant for this

🤪

[glossy phoenix]

nothing were logged

[stone whale]

hmm that's what i expected

[glossy phoenix]

yk what, I wont bother you anymore

I will try to find by myself

[stone whale]

show the headers tab from the network tab on your request ? maybe you're not calling the proper url

[wide pawn]

(this image doesn't work for me idk why)

i had to open original

[stone whale]

you're calling on port 3000

while the server is on port 3001

that's because you haven't set the baseURL like i said, i suppose 😄

[stone whale]

.

[glossy phoenix]

I have a server on 3001 and my page on 3000

[stone whale]

yes and your page on 3000 is calling the server on 3000 as well, when it should be 3001

[glossy phoenix]

oh ok

so

here

app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true
}));

it should be 3001, right?

[stone whale]

hmmm no

[glossy phoenix]

where then? I don't understand...

[stone whale]

in your front application where you define the register function 🙂

[glossy phoenix]

there is no 3000 in my register

[stone whale]

correct, so that means it keeps the baseURL you had when you called, which is the url you have in your address bar before the first /

[glossy phoenix]

so what should I do?

[stone whale]

.

add that on your front application on the register function, next to the "url:" parameter

[glossy phoenix]

like that?

[stone whale]

no not in cors 😂

around here

[stone whale]

what does your register funciton looks like now

[stone whale]

no, the code

[glossy phoenix]

import { useState } from "react"
import NavBar from "../comps/NavBar";
import axios from 'axios';

export default function Register() {

    const [registerUsername, setRegisterUsername ] = useState('');
    const [registerPassword, setRegisterPassword ] = useState('');

    const register = () => {
        axios({
            method: "post",
            data: {
                username: registerUsername,
                password: registerPassword
            },
            withCredentials: true,
            url: "https://localhost:3001/"
        }).then((res) => console.log(res)).catch((err) => console.log(err));
    }

    return (
        <div>
            <NavBar></NavBar>
            <div>
                {console.log(registerUsername)}
                <h1>Inscription</h1>
                <input type="text" name="username" placeholder="Pseudo" onChange={e => setRegisterUsername(e.target.value)}></input>
                <input type="password" name="password" placeholder="Mot de passe" onChange={e => setRegisterPassword(e.target.value)}></input>
                <button onClick={register}>Terminer</button>
            </div>
        </div>
        
    )
}

[stone whale]

right, as i expected

i think you're too stressed to pay attention to what i'm saying 😄

[stone whale]

add

!= replace

[glossy phoenix]

didn't understand I had to add, mb

[stone whale]

right, remove the s from https

as Sherlock said, but it wasn't a problem then.

[glossy phoenix]

still the same

[stone whale]

but we have a different error

do you see something on your server console now?

[glossy phoenix]

nope

oh mb

there is smtg

an error

C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Parser.js:437
      throw err; // Rethrow non-MySQL errors
      ^

Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client
    at Sequence._packetToError (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\sequences\Sequence.js:47:14)
    at Handshake.ErrorPacket (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\sequences\Handshake.js:123:18)
    at Protocol._parsePacket (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Protocol.js:291:23)
    at Parser._parsePacket (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Parser.js:433:10)
    at Parser.write (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Parser.js:43:10)
    at Protocol.write (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Protocol.js:38:16)
    at Socket.<anonymous> (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\Connection.js:88:28)
    at Socket.<anonymous> (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\Connection.js:526:10)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    --------------------
    at Protocol._enqueue (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Protocol.js:144:48)
    at Protocol.handshake (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Protocol.js:51:23)
    at PoolConnection.connect (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\Connection.js:116:18)
    at Pool.getConnection (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\Pool.js:48:16)
    at Pool.query (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\Pool.js:202:8)
    at C:\Autre\JavaScript\Yowl\yowl\server\index.js:42:8
    at Layer.handle [as handle_request] (C:\Autre\JavaScript\Yowl\yowl\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Autre\JavaScript\Yowl\yowl\node_modules\express\lib\router\route.js:144:13)
    at Route.dispatch (C:\Autre\JavaScript\Yowl\yowl\node_modules\express\lib\router\route.js:114:3)
    at Layer.handle [as handle_request] (C:\Autre\JavaScript\Yowl\yowl\node_modules\express\lib\router\layer.js:95:5) {
  code: 'ER_NOT_SUPPORTED_AUTH_MODE',
  errno: 1251,
  sqlMessage: 'Client does not support authentication protocol requested by server; consider upgrading MySQL client',
  sqlState: '08004',
  fatal: true
}

Node.js v18.12.1
[

[stone whale]

ah so we're reaching the sql connection!

[glossy phoenix]

if you say so 😭

[stone whale]

what is this db object in the server bit

[glossy phoenix]

const mysql = require('mysql');


const db = mysql.createPool({
    connectionLimit: 10,
    host: "localhost",
    user: "root",
    password: "password",
    database: "legin_register"
});
  
module.exports = db;

[stone whale]

and in your sql browser that you use to see the table empty, you connect as root with the password "password" ?

[glossy phoenix]

1. Yes
2. No I just didn't let my real password since I use it for a lot of things

[stone whale]

ok, well for a small project like that you could actually make the password "password" tbf, it's not a real database 🙂

apparenly you could try this in the sql browser

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'; -- where obviously 'password' is your password, if you want to keep it
FLUSH PRIVILEGES;

[glossy phoenix]

uh

ok

and where

[stone whale]

what software do you use, dbeaver?

[glossy phoenix]

I don't know how to use this shit

[stone whale]

try to put it there

[glossy phoenix]

where's there?

[stone whale]

where it's written SELECT * FROM...

[glossy phoenix]

I can't write there

[stone whale]

hmm you can probably try something in the Query menu at the box, something like new script sql

[glossy phoenix]

ok

it looks like I can run SQL script which is in a file

[stone whale]

try another of the menu items, it should open just a text input to put your sql

[glossy phoenix]

I definitely don't find anything

[stone whale]

oh at the top left, the icon with a sheet that says sql+ ?

[glossy phoenix]

oh yes, mb

[stone whale]

ok try to execute the query again

you might have to restart the node server just in case

[stone whale]

no erm, the register thingy

[glossy phoenix]

oh ok

[stone whale]

do we have a different error in the node console

[glossy phoenix]

Server started on port 3001
in the register route
in the select query
C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Parser.js:437
throw err; // Rethrow non-MySQL errors
^

Error: ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost' (using password: YES)
at Sequence._packetToError (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\sequences\Sequence.js:47:14)
at Handshake.ErrorPacket (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\sequences\Handshake.js:123:18)
at Protocol._parsePacket (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Protocol.js:291:23)
at Parser._parsePacket (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Parser.js:433:10)
at Parser.write (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Parser.js:43:10)
at Protocol.write (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Protocol.js:38:16)
at Socket.<anonymous> (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\Connection.js:88:28)
at Socket.<anonymous> (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\Connection.js:526:10)
at Socket.emit (node:events:513:28)
at addChunk (node:internal/streams/readable:324:12)
--------------------
at Protocol._enqueue (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Protocol.js:144:48)
at Protocol.handshake (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\protocol\Protocol.js:51:23)
at PoolConnection.connect (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\Connection.js:116:18)
at Pool.getConnection (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\Pool.js:48:16)
at Pool.query (C:\Autre\JavaScript\Yowl\yowl\node_modules\mysql\lib\Pool.js:202:8)
at C:\Autre\JavaScript\Yowl\yowl\server\index.js:42:8
at Layer.handle [as handle_request] (C:\Autre\JavaScript\Yowl\yowl\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Autre\JavaScript\Yowl\yowl\node_modules\express\lib\router\route.js:144:13)
at Route.dispatch (C:\Autre\JavaScript\Yowl\yowl\node_modules\express\lib\router\route.js:114:3)
at Layer.handle [as handle_request] (C:\Autre\JavaScript\Yowl\yowl\node_modules\express\lib\router\layer.js:95:5) {
code: 'ER_ACCESS_DENIED_ERROR',
errno: 1045,
sqlMessage: "Access denied for user 'root'@'localhost' (using password: YES)",
sqlState: '28000',
fatal: true
}

Node.js v18.12.1
[nodemon] app crashed - waiting for file changes before starting...

[stone whale]

you've used the same password as before or you swapped to 'password' as i wrote it

[glossy phoenix]

I swapped it only on discord

[stone whale]

ok 🙂 well that's odd it says you can't connect now 🤔

[glossy phoenix]

🥲

[stone whale]

ok we'll revert it

ALTER USER 'root'@'localhost' IDENTIFIED BY 'password';
FLUSH PRIVILEGES;

then close your node server and do this npm un mysql && npm i mysql2

you might need to change the import in your db file on the server file to do
const mysql = require('mysql2');

[stone whale]

do it in two times then

npm un mysql

npm i mysql2

[glossy phoenix]

done

@stone whaleisn't the origine of the problem that it tries to use password YES?

[stone whale]

no, it says it's using a password to connect 🙂 there are methods that don't

[glossy phoenix]

ok sorry

I'm looking on internet but don't understand anything...

[stone whale]

again, you didn't forget to replace your password in the sql commands just above?

[glossy phoenix]

I never edited it in VSCode

[stone whale]

you just need to have them match, in the node server file, and on the mysql server

[glossy phoenix]

ik