rw-login v0.1.1

RW.Login

Part of ReWidgets library to simplify account management with token authorization.

Table of contents

• Note
• ToDo List
• Usage
  • Complete look
• Exapmle
• Latest changes
• Help

Note

This is a really raw version which lacks of functionality and usability. For now, any changes could be made that break compatibility with other versions. I'll try to announce all of them in last changes section

ToDo List

• Log in functions
• Sign up functions
• Forgot password functions
• Make convenient library look
• Separate library and expamles

Usage

Installation

Go to your dev directory and run:

npm i rw-login -D

It should install rw-login in node_modules folder. To import functions you need, simply declare it in .js file:

import {login, loginHandler} from 'rw-login'

For now, the widget needs to be built with bundling tool (webpack is recommended) and has few functions at index.js:

login(apiAuthUrl, callback, creds)

Calls loginApi(apiAuthUrl, creds) at Api/main.js, sends credentials (username and password) and talks with callback about success. If authorization succeed, login() sends {token: <token>} to callback as body argument.

loginHandler(token)

Simple handler that sends {token: <token>} to localStorage

callback function

This function must have success as first argument without default state and and body with default state:

function callback(success, body={}) {
    if (success) {
        //Handle body as you want. The easiest way is shown below.
        loginHandler(body.token);
    } else {
        //What to do if authorization failed.
    }
}

loginApi(apiAuthUrl, creds)

Uses credentials from creds argument and sends them in body of the fetch with POST method to window.origin + apiAuthUrl:

const fetchInit = {
    method: 'POST',
    headers: new Headers({
        "Content-Type": "application/json"
    }),
    body: JSON.stringify({
        "username": creds.username,
        "password": creds.password
    })
};
const response = await fetch(window.origin + apiAuthUrl, fetchInit);

As you can see, it's necessary to use / in the first position of apiAuthUrl argument. It's also more safely to use / in the end, too.

Complete look

function callback(success, body={}) {
    if (success) {
        loginHandler(body.token);
    } else {
        console.log("FAILURE!");
    }
}

const creds = {
    username: "admin",
    password: "admin123"
}

login("/token-auth/", callback, creds);

Example

You can see an example of working model on React at rw-login-example

Latest changes

• Almost complete remake: lib look, examples are now separated to rw-login-example.

Help

Contact with me at br3w0r-concepts@outlook.com if you want to make ReWidgets better.