How we can make this implementation reusable?

[reiniergs]

How we can make this implementation reusable?

Requirements

• As a developer I want to render UI that can be see only if the customer is authenticated
• As a developer I want to redirect the customer to sign in page when the customer is unauthenticated and he try to navigate to authenticated routes
• As a developer I want to add/remove authentication provider based on my use cases
• As a developer I want to create my own public pages where the customer can navigate without authentication

Proposal

    const signInMethods = {

    };

    <Application locale="en-US" theme={}>
        <FirebaseAuth
            instance={firebaseProjectInstance}
            
            whenAuthenticated={<AuthApp/>}
            whenAuthenticatedRoutesPrefix="app" // default to app
            
            { /* 
                Ommiting whenPublic it will provide default sign in/up UI 
            */}
            whenPublic={<PublicPages />}
            whenPublicRoutesPrefix="home" // default to home

            signInMethods={}
        />
    <Application>

Example of <PublicPages />

    <div>
        <h1>Home page</h1>
        <Link to="/home/signin">Sign In here</Link>
        <Link to="/home/signin">Sign Up here</Link>
        <Router history={history}>
            <div>
                <Route path="home/prices" component={<Prices />} />
            </div>
        </Router>
    </div>