tk-login v1.3.4

Package for logging in TechKids Edu system

Usage

const MainComponent = (props) => {
  const { getToken } = props; // Function will return promise with token.
  const { logout } = props; // Function will trigger logout action.
  ....
}


<Login
  firebaseConfig={{
    apiKey: <<API Key>>,
    authDomain: <<Auth Domain>>,
    databaseURL: <<Database URL>>,
    projectId: <<Project Id>>,
    storageBucket: <<Storage bucket>>,
    messagingSenderId: <<Messaging Sender Id>>,
  }}
  authUrl={<<Authentication Url>>}
  idUrl={<<ID Url>>}
>
  <MainComponent />
</Login>

Logout route on server-side:

const admin = require('firebase-admin');

admin.initializeApp(<<Firebase configs>>)

app.delete(<<Authentication Url>>, (req, res) => {
  const { uid } = req.decodedClaims; // Firebase uid
  if(uid) {
    admin.auth()
      .revokeRefreshTokens(uid)
      .then(() => {
        res.cookie('session', '', {});
        res.json({ success: 1 });
      })
      .catch(() => {
        res.status(500).json({ success: 0});
      });
  } else res.status(500).json({ success: 0});
});

For React Admin need create custom button:

• File LogoutButton.jsx

import React from 'react';
import PropTypes from 'prop-types';
import MenuItem from '@material-ui/core/MenuItem';
import { withStyles } from '@material-ui/core/styles';
import ExitIcon from '@material-ui/icons/PowerSettingsNew';
import classnames from 'classnames';

const styles = theme => ({
  menuItem: {
    color: theme.palette.text.secondary,
  },
  iconMenuPaddingStyle: {
    paddingRight: '1.2em',
  },
  iconPaddingStyle: {
    paddingRight: theme.spacing.unit,
  },
});

const sanitizeRestProps = ({
  classes,
  className,
  userLogout,
  locale,
  redirectTo,
  ...rest
}) => rest;

const Logout = ({
  classes,
  className,
  logoutAction,
  ...rest
}) => (
  <MenuItem
    className={classnames('logout', classes.menuItem, className)}
    onClick={logoutAction}
    {...sanitizeRestProps(rest)}
  >
    <span className={classes.iconMenuPaddingStyle}>
      <ExitIcon />
    </span>
    Logout
  </MenuItem>
);

Logout.propTypes = {
  classes: PropTypes.shape({}).isRequired,
  className: PropTypes.string,
  logoutAction: PropTypes.func.isRequired,
  redirectTo: PropTypes.string,
};

export default withStyles(styles)(Logout);

• Pass button logout to Admin component

import LogoutButton from './LogoutButton.jsx';

const AdminComponent = (props) => {
  
  render() {
    const { logout } = props; // Function logout from tk-login

    return (
      <Admin
        logoutButton={() => <LogoutButton
          logoutAction={logout}
        />}
        {...other_props}
      >
        .............
      </Admin>
    );
  }
};

Change Log

Version 1.3.0

Changed

• Change auth system from session-based to token-based