Reactを使ってログイン機能を作成しました。Firebaseなどは利用していません。

初めてReactを触ってみたが、ログイン周りの決定打が見つからなかったので自分で書いてみた。
上記サイトを参考に、作ってみたのですが、ログインボタンが存在しなかったので、
自分で作成しようと考えたのですが、
肝心なログイン機能の部分がよくある「handle~」形式ではなく、以下のように、ayncを使ったものでした。非同期関数にしようとしたのですが、componentDidMountがあるせいか、エラーが出てしまって、できませんでした。(「;が必要です」というVSCodeの下部に出てきました。)

JavaScript
1async componentDidMount() {
2    await User.logout();
3  }

このような場合、どのように書き換えるべきなのでしょうか?ご教授頂ければ幸いです。よろしくお願い致します。

自分のコード

Auth.js

JavaScript
1import React from 'react';
2import { Redirect } from 'react-router-dom';
3import User from './User';
4
5const Auth = props =>
6  User.isLoggedIn() ? props.children : <Redirect to={ '/login' } />;
7
8export default Auth;

User.js

JavaScript
1class User {
2    isLoggedIn = () => this.get('isLoggedIn') === 'true';
3  
4    set = (key, value) => localStorage.setItem(key, value);
5  
6    get = key => this.getLocalStorage(key);
7  
8    getLocalStorage = key => {
9      const ret = localStorage.getItem(key);
10      if (ret) {
11        return ret;
12      }
13      return null;
14    };
15  
16    login = async (email, password) => {
17      // ログイン処理
18      // ログインエラー時には、falseを返してもいいし、returnを別の用途で利用したかったら
19      // 例外を出しして呼び出し元でcatchしてもいいかと思います。
20  
21      this.set('isLoggedIn', true);
22  
23      return true;
24    };
25  
26    logout = async () => {
27      if (this.isLoggedIn()) {
28        this.set('isLoggedIn', false);
29  
30        // ログアウト処理
31        //　他に必要な処理があるのならこちら
32      }
33    };
34  }
35  
36  export default new User();

JavaScript
1import React, { Component } from 'react';
2import { Form, Button, Container, Row, Alert } from 'react-bootstrap';
3import { withRouter } from 'react-router-dom';
4import User from './User';
5
6class Login extends Component {
7  constructor(props) {
8    super(props);
9
10    this.state = {
11      email: '',
12      password: '',
13      errMessage: '',
14    };
15  }
16
17  click = async () => {
18    try {
19      await User.login(this.state.email, this.state.password);
20
21      this.props.history.push({ pathname: 'list1' });
22    } catch (e) {
23      this.setState({ errMessage: 'メールアドレスかパスワードが違います' });
24    }
25  };
26
27  handleChange = e => {
28    this.setState({ [e.target.id]: e.target.value });
29  };
30
31  render() {
32    return (
33      <Container className="center">
34        <Row className="justify-content-md-center">
35          <Form>
36            {this.state.errMessage && (
37              <Alert variant="danger">{this.props.message}</Alert>
38            )}
39            <p>
40              <b>ログイン</b>
41            </p>
42            <Form.Group controlId="email">
43              <Form.Label>メールアドレス</Form.Label>
44              <Form.Control
45                type="email"
46                placeholder="メールアドレスを入力してください"
47                onChange={this.handleChange}
48                value={this.state.email}
49              />
50            </Form.Group>
51            <Form.Group controlId="password">
52              <Form.Label>パスワード</Form.Label>
53              <Form.Control
54                type="password"
55                placeholder="パスワードを入力してください"
56                onChange={this.handleChange}
57                value={this.state.password}
58              />
59            </Form.Group>
60            <Button variant="primary" type="button" onClick={this.click}>
61              ログイン
62            </Button>
63          </Form>
64        </Row>
65      </Container>
66    );
67  }
68}
69
70export default withRouter(Login);

Logout.js

JavaScript
1import React, { Component } from 'react';
2import { Container, Row } from 'react-bootstrap';
3import { Link } from 'react-router-dom';
4import User from './User';
5
6export default class Logout extends Component {
7  async componentDidMount() {
8    await User.logout();
9  }
10
11  render() {
12    return (
13      <Container className="center">
14        <Row className="justify-content-md-center">
15          <div>
16            <h2>ログアウトしました</h2>
17            <div className="text-center">
18              <Link to="/login">ログイン画面へ</Link>
19            </div>
20          </div>
21        </Row>
22      </Container>
23    );
24  }
25}

List1.js

JavaScript
1import React, { Component } from 'react';
2import { Container } from 'react-bootstrap';
3
4export default class List1 extends Component {
5  render() {
6    return (
7      <div>
8        <Container className="center">Hello Login app list1</Container>
9      </div>
10    );
11  }
12}

App.js

JavaScript
1import React, { Component } from 'react';
2import {
3  BrowserRouter as Router,
4  Route,
5  Switch,
6  Redirect,
7} from 'react-router-dom';
8
9import Auth from './Auth';
10
11import Login from './Login';
12import Logout from './Logout';
13import List1 from './List1';
14
15export default class App extends Component {
16  render() {
17    return (
18      <Router>
19        <Switch>
20          <Route exact path="/login" component={ Login } />
21          <Route exact path="/logout" component={ Logout } />
22
23          <Auth>
24            <Switch>
25              <Route exact path="/list1" component={ List1 } />
26              <Redirect from="/" to="/list1" />
27            </Switch>
28          </Auth>
29        </Switch>
30      </Router>
31    );
32  }
33}