User Authentication

[PeterArriaza]

Is your feature request related to a problem? Please describe. As a user, I'd like to be able to sign up for Phlask or sign in to my existing account, so that I can access a customized in app experience.

Describe the solution you'd like Solution integrating authentication provider (Auth0) to react app that stores user information in Firebase. The user should have a profile page or icon that shows that they are logged in on the homepage.

Describe alternatives you've considered 3rd party/social media sign in

Additional context

• To start, just collect email/password
• Need to research caching options through Auth0
• Data validation rules (password requirements, e.g.)

https://docs.google.com/document/d/1_zjXc8J1pvc-Wdbu6d1_a4yHtv6xxtw2PNH9LKi1ru4/edit?ts=6088a411

[tnguyen21]

Some thoughts on how to move forward with this ticket:

• Let's take advantage of Firebase's auth features rather than using an external provider
  • https://firebase.google.com/docs/auth/web/firebaseui
• Let's also take advantage of some open source hooks that take care of some user account workflows for us
  • https://github.com/CSFrequency/react-firebase-hooks/tree/master/auth
• All of this is mostly related to the backend side of user accounts
• We'll need to work with the Design circle on creating UI components for user accounts. Hopefully this work might be taken on by future designers that join the project

Additionally some more thought needs to go into grooming and breaking down these tickets into more granular/smaller tasks that will be easier to review and merge. As a project, Phlask still needs to think about what kind of features we want to support for users, and so there's a high probability that we'll pivot and adjust these tickets as we build out features and learn more about the problem space.

Let's loop back next hack night and set aside some time to discuss and break down these tickets some more.

[matt-cross23]

Just wanted to give a heads up of all the info I've looked at and obstacles I'm running into

TLDR: To give an update on this ticket, I'm still figuring out the best plan of action but steadily making progress.

I found a better repo with a demo, which also helps bring up the question of how we want to add in the content. The UI flow is a standard OAuth sign-in form, I'm more concerned if it's okay to have an HTML5 page with firebase scripts or if we want React-Routing (Routing I think would be better to change the state into logged in across all pages).

---

If we go with React Routing, here's a codebase that I found that gives an idea of how to write it with useState and ReactRouting

const theme = createTheme()

export default function App() {

    const [firebaseInitialized, setFirebaseInitialized] = useState(false)

    useEffect(() => {
        firebase.isInitialized().then(val => {
            setFirebaseInitialized(val)
        })
    })
    return firebaseInitialized !== false ? (
        <MuiThemeProvider theme={theme}>
            <CssBaseline />
            <Router>
                <Switch>
                    <Route exact path="/" component={HomePage} />
                    <Route exact path="/login" component={Login} />
                    <Route exact path="/register" component={Register} />
                    <Route exact path="/dashboard" component={Dashboard} />
                </Switch>
            </Router>
        </MuiThemeProvider>
    ) : <div id="loader"><CircularProgress /></div>
}

---

There is a user-auth branch made by Pete (I think it's called pete/auth) which has a good similar code but when trying to reach beta.phlask.me/login page, there's a 403 error in the network (I'm assuming it's User access denied); trying to replicate the problem on my own machine hasn't been working so I decided to replace the code. But before I do that I'm trying to figure out the broken functionality of Pete's code and how to follow https://github.com/firebase/firebaseui-web/tree/master/demo

[matt-cross23]

I was looking at the app last night and realized that the OAuth sign-in flow does work on the beta site, but once authentification is finished, the page refreshes and the user does not stay signed in. I'll look more into it and try and debug this issue.