Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wire up authenticated API calls in frontend #56

Merged
merged 1 commit into from Jul 27, 2020
Merged

Wire up authenticated API calls in frontend #56

merged 1 commit into from Jul 27, 2020

Conversation

c-w
Copy link
Contributor

@c-w c-w commented Jul 27, 2020

This pull request integrates the React frontend with the backend AAD B2C authentication. The pull request demonstrates how to force a login via AAD B2C, grab the returned token and use the token to make an authenticated request to our API.

Animation showing login flow

Resolves #4.

@c-w c-w requested a review from jeongl Jul 27, 2020
jeongl
jeongl approved these changes Jul 27, 2020
import './index.scss';

ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
Copy link
Contributor

@jeongl jeongl Jul 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason for removing strict mode?

Copy link
Contributor Author

@c-w c-w Jul 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Redux Toolkit throws warnings under strict mode.


export default function App() {
return (
<HashRouter>
<Suspense fallback={<Loading />}>
<Switch>
<Route exact path="/" component={Home} />
<PrivateRoute exact path="/" component={Home} />
Copy link
Contributor

@jeongl jeongl Jul 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't all these paths be route protected?

Copy link
Contributor Author

@c-w c-w Jul 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/id_token must be non-authenticated since it's our auth callback/entrypoint. Video call could be authenticated if we wanted to.


function Login() {
return (
<LoginRedirect>
Copy link
Contributor

@jeongl jeongl Jul 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems a little confusing to nest what looks to be component wrappers to run effects. No action needed, but curious about the thought process here.

Copy link
Contributor Author

@c-w c-w Jul 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is mostly a work-around for the fact that hooks shouldn't run conditionally which means that we don't want to add LoginProfile into LoginRedirect. The logic to fetch the profile information could of course also be added in another place and I suspect it may move once we have more UI components set up. Feel free to refactor this as you see fit. I mostly just wanted to provide the scafolding for the authentication integration with this pull request.

@c-w c-w merged commit d99f5cf into master Jul 27, 2020
2 checks passed
@c-w c-w deleted the auth branch Jul 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

As a maintainer or developer, I can log into GitHub Tutors with my GitHub identity
2 participants