[React + Social UI Kit] Creating a web Signup page

Web
1

I’m using the Login template to create a Signup page for a Social UI Kit app.

here is the
Template

here is my implementation

export default function Signup(props) {
    const handleSubmit = (e) => {
        e.preventDefault();

        const values = Object.fromEntries(new FormData(e.target));

        const data = [values.username, values.password]
        props.onSubmit(data);
    }

    return (
        <form className="Signup" onSubmit={handleSubmit}>
            <h1>
                Bem vindo ao 
                <strong style={{fontSize: 32}}>BP Money<small style={{color:'#333',fontWeight:'normal'}}>+</small></strong>
            </h1>

            <p>Faça seu cadastro: </p>
            <label>Usuário ou email</label>
            <input type="text" name="username" required />
            <label>Senha</label>
            <input type="password" name="password" required />
            <button type="submit">Login</button>
        </form>
    )
};

what do I need to do in order to link my function to amity Social UI Kit ?

2

Hi @mavromati - the onsubmit function set state of App Component Amity-Social-Cloud-Web-Sample-Apps/App.js at main · AmityCo/Amity-Social-Cloud-Web-Sample-Apps · GitHub that in turns invoke AmityUIKitProvider, passing on userId parameter - this will initiate the UIKit component and render.

1 Like
3

Thanks @touchaponk . I wish to create new users, will simple invoking a AmityUIKitProvider with a new userId on submit create a new user for the app ?

4

Yes that will create new user for you. This means that you need to make sure users have been through a proper authentication method before reaching that point to prevent impersonation. Please also make sure secureMode is enabled in production Security - Amity Docs

1 Like