Btukfyl

I want to add a signup page to my react-admin web portal. Since react-admin do not provide a signup page, I created a custom page and added it to custom routes:

customRoutes.js

import React from 'react';

import { Route } from 'react-router-dom';

import SignupForm from './signupForm';



export default [

    <Route path="/signup" component={SignupForm} noLayout/>,

];

The problem is that I am only able to open the page at /signup when a user is already signed in. Otherwise I am automatically redirected to /login route.

How to disable authentication for custom routes? Is there some attribute which <Route> accepts or something to do with the dataProvider.js?

EDIT:

Adding the representative code for my signupForm.js:

import React from 'react';

import TextField from '@material-ui/core/TextField';

import Button from '@material-ui/core/Button';

import Dialog from '@material-ui/core/Dialog';

import { fetchUtils } from 'react-admin';

import { ApiUrl } from './config';



class SignupForm extends React.Component {

    constructor() {

        super();

        this.state = {

            fields: {

                username: '',

                password: ''

            }

    }





    handleChange = name => event => {

        let fields = this.state.fields;

        fields[name] = event.target.value;



        this.setState({

            fields: fields,

        });

    };



    handleSubmit = (event) => {

        // Prevent default

        event.preventDefault();



        if (this.handleValidation()) {

            let body = JSON.parse(JSON.stringify(this.state.fields));



            let url = ApiUrl + '/api/user/create';

            let options = {}

            options.headers = new Headers({ Accept: 'application/json' });

            options.method = 'POST'

            options.body = JSON.stringify(body);

            fetchUtils.fetchJson(url, options)

                .then(data => {

                    alert(data.json.message);

                    this.props.history.push('/login')

                })

                .catch((err, ...rest) => {

                    console.log(err.status, err.message);

                    alert(err.message);

                });

        }

    }



    render() {

        const { classes } = this.props;



        const actions = [

            <Button

                type="submit"

                label="Submit"

                color='primary'

                variant="flat"

            >Submit</Button>,

        ];



        return (

            <Dialog

                open={true}

                style={{

                    textAlign: "center",

                }}

                onClose={this.handleClose}

                classes={{ paper: classes.dialogPaper }}

            >

                <DialogTitle>Create an Account</DialogTitle>

                <form className={classes.container} noValidate autoComplete="off" onSubmit={this.handleSubmit}>

                    <TextField

                        required

                        id="username"

                        label="Username"

                        value={this.state.fields["username"]}

                        onChange={this.handleChange('username')}

                    />

                    <br />

                    <TextField

                        required

                        id="password"

                        label="Password"

                        value={this.state.fields["password"]}

                        onChange={this.handleChange('password')}

                        type="password"

                    />



                    <div style={{ textAlign: 'right', padding: 40 }}>

                        {actions}

                    </div>

                </form>

            </Dialog>

        );

    }

}



export default withStyles(styles)(SignupForm);

The problem was that on request to /signup, react-admin was calling the authProvider with type AUTH_GET_PERMISSIONS whose code was:

if (type === AUTH_GET_PERMISSIONS) {

    const role = localStorage.getItem('role');

    return role ? Promise.resolve(role) : Promise.reject();

}

Since the user was not logged in so localStorage.role was never initialised.

Changed it to:

if (type === AUTH_GET_PERMISSIONS) {

    const role = localStorage.getItem('role');

    return role ? Promise.resolve(role) : Promise.resolve('guest');

}