Meteor.js page restrictions with react router v4

We can imagine that we have already meteor.js authentication as like Signup Signin & Signout but we have to worry about some pages restriction such as Todo page which is available right now without a user authentication but we need user can access this page after Signin & after Signin he can’t access the Signin & Signuot page.

On react router 4 it has some changes such as history , on the react router < 4 it included with browserHistory but now in 4 it’s not present so we need to install this package from npm such as npm install history and then in routes

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();
const publicPages = ['/', '/signup'];
const privatePages = ['/todo'];

const onEnterPublicPage = () => {
    if (Meteor.userId()) {
        history.replace('/todo');
    }
};
  
const onEnterPrivatePage = () => {
    if (!Meteor.userId()) {
        history.replace('/');
    }
};

export const onAuthenticationChange = (isAuthenticated) => {
    console.log('is authenticated...', isAuthenticated);

    const pathname = this.location.pathname;
    const isUnauthenticatedPage = publicPages.includes(pathname);
    const isAuthenticatedPage = privatePages.includes(pathname);
  
    if (isAuthenticated && isUnauthenticatedPage) {
        console.log('Autenticated');
        history.replace('/todo');
    } else if (!isAuthenticated && isAuthenticatedPage) {
        console.log('Not Authenticated');
        history.replace('/');
    }
}

export const routes = (
    <Router history = {history}>
        <Switch>
            <Route exact path="/" component={Signin} onEnter={onEnterPublicPage} />
            <Route exact path="/signup" component={Signup} onEnter={onEnterPublicPage} />
            <Route exact path="/todo" component={Todo} onEnter={onEnterPrivatePage} />
            <Route path="*" component={NotFound}/>
        </Switch>
    </Router>
);

import React from 'react';

import { Router, Route, Switch } from 'react-router-dom';

import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

const publicPages = ['/', '/signup'];

const privatePages = ['/todo'];

const onEnterPublicPage = () => {

if (Meteor.userId()) {

history.replace('/todo');

}

};

const onEnterPrivatePage = () => {

if (!Meteor.userId()) {

history.replace('/');

}

};

export const onAuthenticationChange = (isAuthenticated) => {

console.log('is authenticated...', isAuthenticated);

const pathname = this.location.pathname;

const isUnauthenticatedPage = publicPages.includes(pathname);

const isAuthenticatedPage = privatePages.includes(pathname);

if (isAuthenticated && isUnauthenticatedPage) {

console.log('Autenticated');

history.replace('/todo');

} else if (!isAuthenticated && isAuthenticatedPage) {

console.log('Not Authenticated');

history.replace('/');

}

export const routes = (

</Switch>

</Router>

);

Now in the main.js file add the following

import { routes, onAuthenticationChange } from '../imports/routes/routes';

Tracker.autorun(() => {
    const isAuthenticated = !!Meteor.userId();
    onAuthenticationChange(isAuthenticated);
});

import { routes, onAuthenticationChange } from '../imports/routes/routes';

Tracker.autorun(() => {

const isAuthenticated = !!Meteor.userId();

onAuthenticationChange(isAuthenticated);

});

That’s it.

Meteor.js page restrictions with react router v4

Fool Dev

Get current week first date & last date in moment js

How to create dynamic header in meteor.js with react

How to install Meteor.js in windows