diff --git a/db/seeders/20210302050835-demo-groups.js b/db/seeders/20210302050835-demo-groups.js
index 1d98d385a..33bd52158 100644
--- a/db/seeders/20210302050835-demo-groups.js
+++ b/db/seeders/20210302050835-demo-groups.js
@@ -6,7 +6,7 @@ module.exports = {
   up: async (queryInterface, Sequelize) => {
     await queryInterface.bulkInsert('UserAccounts', [
       {
-        username: 'seeded-account-id',
+        email: 'seeded-account-id@example.com',
         createdAt: new Date(),
         updatedAt: new Date(),
       },
diff --git a/docs/authentication.md b/docs/authentication.md
index 4446cf0ab..0de517c08 100644
--- a/docs/authentication.md
+++ b/docs/authentication.md
@@ -2,11 +2,11 @@
 
 The backend authenticates requests using signed cookies which contains user's id so that it does not have to be fetched for every request.
 
-Cookies are sent [`secure` and `HttpOnly`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#restrict_access_to_cookies) when users register their account, or when they log in using username and password.
+Cookies are sent [`secure` and `HttpOnly`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#restrict_access_to_cookies) when users register their account, or when they log in using email and password.
 
 Cookies expire after 30 minutes and the client is responsible for renewing cookies by calling the `GET /me/cookie` endpoint before they expire.
 
-When renewing cookies, the server will re-check if the user still exists and if they haven't changed their password. For this a hash of the user's password hash, email, username, and id will be generated and included in the cookie. If any of these properties changes, the cookie cannot be renewed and the user has to log-in again.
+When renewing cookies, the server will re-check if the user still exists and if they haven't changed their password. For this a hash of the user's password hash, email, and id will be generated and included in the cookie. If any of these properties changes, the cookie cannot be renewed and the user has to log-in again.
 
 ## Admin permissions
 
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
index 60acb771b..5c6435ed4 100644
--- a/frontend/src/hooks/useAuth.ts
+++ b/frontend/src/hooks/useAuth.ts
@@ -9,17 +9,20 @@ export const useAuth = () => {
     isLoading,
     isAuthenticated,
     logout: () => {
-      // FIXME: clear cookies and reload
+      // Delete cookies (since the auth cookie is httpOnly we cannot access
+      // it using JavaScript, e.g. cookie.delete() will not work).
+      // Therefore we ask the server to send us an invalid cookie.
       fetch(`${SERVER_URL}/me/cookie`, { method: 'DELETE' }).then(() => {
         setIsAuthenticated(false)
+        // Reload the page (no need to handle logout in the app)
         document.location.reload()
       })
     },
-    login: ({ username, password }: { username: string; password: string }) => {
+    login: ({ email, password }: { email: string; password: string }) => {
       setIsLoading(true)
       fetch(`${SERVER_URL}/me/login`, {
         method: 'POST',
-        body: JSON.stringify({ username, password }),
+        body: JSON.stringify({ email, password }),
       })
         .then(() => {
           setIsAuthenticated(true)
diff --git a/frontend/src/pages/PublicHome.tsx b/frontend/src/pages/PublicHome.tsx
index fc6ac1e31..7210491be 100644
--- a/frontend/src/pages/PublicHome.tsx
+++ b/frontend/src/pages/PublicHome.tsx
@@ -5,18 +5,18 @@ import { useAuth } from '../hooks/useAuth'
 
 const SERVER_URL = process.env.REACT_APP_SERVER_URL
 
+const emailRegEx = /.+@.+\..+/
+const passwordRegEx =
+  /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/
+
 const PublicHomePage: FunctionComponent = () => {
   const { login } = useAuth()
   const [showRegisterForm, setShowRegisterForm] = useState(false)
-  const [username, setUsername] = useState('')
+  const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [password2, setPassword2] = useState('')
 
-  const loginFormValid =
-    username.length > 0 &&
-    /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/.test(
-      password,
-    )
+  const loginFormValid = emailRegEx.test(email) && passwordRegEx.test(password)
 
   const registerFormValid = loginFormValid && password === password2
 
@@ -36,11 +36,11 @@ const PublicHomePage: FunctionComponent = () => {
           {showLoginForm && (
             <form>
               <TextField
-                label="username"
-                type="text"
-                name="username"
-                value={username}
-                onChange={({ target: { value } }) => setUsername(value)}
+                label="email"
+                type="email"
+                name="email"
+                value={email}
+                onChange={({ target: { value } }) => setEmail(value)}
               />
               <TextField
                 label="password"
@@ -52,7 +52,7 @@ const PublicHomePage: FunctionComponent = () => {
               <button
                 className="bg-navy-800 text-white text-lg px-4 py-2 rounded-sm w-full hover:bg-opacity-90"
                 type="button"
-                onClick={() => login({ username, password })}
+                onClick={() => login({ email, password })}
                 disabled={!loginFormValid}
               >
                 Log in
@@ -69,11 +69,11 @@ const PublicHomePage: FunctionComponent = () => {
           {showRegisterForm && (
             <form>
               <TextField
-                label="username"
-                type="text"
-                name="username"
-                value={username}
-                onChange={({ target: { value } }) => setUsername(value)}
+                label="email"
+                type="email"
+                name="email"
+                value={email}
+                onChange={({ target: { value } }) => setEmail(value)}
               />
               <TextField
                 label="password"
@@ -97,7 +97,7 @@ const PublicHomePage: FunctionComponent = () => {
                 onClick={() => {
                   fetch(`${SERVER_URL}/register`, {
                     method: 'POST',
-                    body: JSON.stringify({ username, password }),
+                    body: JSON.stringify({ email, password }),
                   })
                 }}
                 disabled={!registerFormValid}
diff --git a/src/authenticateRequest.ts b/src/authenticateRequest.ts
index f02694d83..520cf0a99 100644
--- a/src/authenticateRequest.ts
+++ b/src/authenticateRequest.ts
@@ -21,7 +21,7 @@ export type AuthContext = {
 export const userHash = (user: UserAccount): string =>
   crypto
     .createHash('sha1')
-    .update(`${user.id}:${user.username}:${user.passwordHash}`)
+    .update(`${user.id}:${user.email}:${user.passwordHash}`)
     .digest('hex')
 
 export const authCookieName = 'auth'
diff --git a/src/models/user_account.ts b/src/models/user_account.ts
index c597583c0..a330882c8 100644
--- a/src/models/user_account.ts
+++ b/src/models/user_account.ts
@@ -14,7 +14,7 @@ import Group from './group'
 
 export interface UserAccountAttributes {
   id: number
-  username: string
+  email: string
   passwordHash: string
   isAdmin?: boolean
   name: string
@@ -34,7 +34,7 @@ export default class UserAccount extends Model<
 
   @Unique
   @Column
-  public username!: string
+  public email!: string
 
   @Column
   public passwordHash!: string
diff --git a/src/routes/login.ts b/src/routes/login.ts
index 176fda0f8..6b6220737 100644
--- a/src/routes/login.ts
+++ b/src/routes/login.ts
@@ -6,11 +6,11 @@ import { authCookie } from '../authenticateRequest'
 import { trimAll } from '../input-validation/trimAll'
 import { validateWithJSONSchema } from '../input-validation/validateWithJSONSchema'
 import UserAccount from '../models/user_account'
-import { passwordInput, usernameInput } from './register'
+import { emailInput, passwordInput } from './register'
 
 const loginInput = Type.Object(
   {
-    username: usernameInput,
+    email: emailInput,
     password: passwordInput,
   },
   { additionalProperties: false },
@@ -31,7 +31,7 @@ const login =
 
     const user = await UserAccount.findOne({
       where: {
-        username: valid.value.username,
+        email: valid.value.email,
       },
     })
     if (user === null) {
diff --git a/src/routes/me.ts b/src/routes/me.ts
index d18d6f970..61eba4347 100644
--- a/src/routes/me.ts
+++ b/src/routes/me.ts
@@ -8,7 +8,7 @@ const getProfile = async (request: Request, response: Response) => {
   if (user === null) return response.send(404).end()
   return response
     .json({
-      username: user.username,
+      email: user.email,
       ...(await user.asPublicProfile()),
     })
     .end()
diff --git a/src/routes/register.ts b/src/routes/register.ts
index edcd13aa4..5730a5b7b 100644
--- a/src/routes/register.ts
+++ b/src/routes/register.ts
@@ -7,9 +7,9 @@ import { trimAll } from '../input-validation/trimAll'
 import { validateWithJSONSchema } from '../input-validation/validateWithJSONSchema'
 import UserAccount from '../models/user_account'
 
-export const usernameInput = Type.String({
-  pattern: '^[a-z0-9._-]{1,255}$',
-  title: 'Username',
+export const emailInput = Type.String({
+  format: 'email',
+  title: 'Email',
 })
 
 export const passwordInput = Type.String({
@@ -19,7 +19,7 @@ export const passwordInput = Type.String({
 
 const registerUserInput = Type.Object(
   {
-    username: usernameInput,
+    email: emailInput,
     name: Type.String({ minLength: 1, maxLength: 255 }),
     password: passwordInput,
   },
@@ -43,7 +43,7 @@ const registerUser =
 
     const user = await UserAccount.create({
       passwordHash: bcrypt.hashSync(valid.value.password, saltRounds),
-      username: valid.value.username,
+      email: valid.value.email,
       name: valid.value.name,
     })
 
diff --git a/src/testServer.ts b/src/testServer.ts
index ad9483e64..b2e770a4a 100644
--- a/src/testServer.ts
+++ b/src/testServer.ts
@@ -32,7 +32,7 @@ export const makeTestServer = async (
     const user = await UserAccount.create({
       isAdmin: false,
       name: 'User',
-      username: 'user',
+      email: 'user@example.com',
       passwordHash: '',
     })
 
@@ -63,7 +63,7 @@ export const makeAdminTestServerWithServices = async (
   const admin = await UserAccount.create({
     isAdmin: true,
     name: 'Admin',
-    username: 'admin',
+    email: 'admin@example.com',
     passwordHash: '',
   })
 
diff --git a/src/tests/authentication.test.ts b/src/tests/authentication.test.ts
index bc60161b3..c7afb817e 100644
--- a/src/tests/authentication.test.ts
+++ b/src/tests/authentication.test.ts
@@ -44,11 +44,11 @@ describe('User account API', () => {
   let app: Express
   let httpServer: Server
   let r: SuperTest<Test>
-  let username: string
+  let email: string
   let password: string
   let authCookie: string
   beforeAll(async () => {
-    username = v4()
+    email = `${v4()}@example.com`
     password = 'y{uugBmw"9,?=L_'
     app = express()
     app.use(cookieParser(process.env.COOKIE_SECRET ?? 'cookie-secret'))
@@ -74,7 +74,7 @@ describe('User account API', () => {
         .set('Accept', 'application/json')
         .set('Content-type', 'application/json; charset=utf-8')
         .send({
-          username,
+          email,
           password,
           name: 'Alex',
         })
@@ -102,7 +102,7 @@ describe('User account API', () => {
         .expect(200)
       expect(res.body).toMatchObject({
         id: /[0-9]+/,
-        username,
+        email,
         isAdmin: false,
       })
     })
@@ -137,7 +137,7 @@ describe('User account API', () => {
       r
         .post('/login')
         .send({
-          username,
+          email,
           password,
         })
         .expect(204)
@@ -146,7 +146,7 @@ describe('User account API', () => {
       r
         .post('/login')
         .send({
-          username,
+          email,
           password: "Y<N-'#sQ2/RCrN_c",
         })
         .expect(401))
@@ -154,7 +154,7 @@ describe('User account API', () => {
       r
         .post('/login')
         .send({
-          username: 'foo',
+          email: 'foo',
           password: "Y<N-'#sQ2/RCrN_c",
         })
         .expect(401))
diff --git a/src/tests/groups_api.test.ts b/src/tests/groups_api.test.ts
index 9a47ebca1..a5a48c603 100644
--- a/src/tests/groups_api.test.ts
+++ b/src/tests/groups_api.test.ts
@@ -41,12 +41,12 @@ describe('Groups API', () => {
 
       // Create test servers
       captain = await UserAccount.create({
-        username: 'captain',
+        email: 'captain@example.com',
         passwordHash: '',
         name: 'Captain A',
       })
       newCaptain = await UserAccount.create({
-        username: 'new-captain',
+        email: 'new-captain@example.com',
         passwordHash: '',
         name: 'New Captain',
       })
@@ -278,17 +278,17 @@ describe('Groups API', () => {
      */
     beforeAll(async () => {
       captain1 = await UserAccount.create({
-        username: captain1Name,
+        email: `${captain1Name}@example.com`,
         name: captain1Name,
         passwordHash: '',
       })
       captain2 = await UserAccount.create({
-        username: captain2Name,
+        email: `${captain2Name}@example.com`,
         name: captain2Name,
         passwordHash: '',
       })
       daCaptain = await UserAccount.create({
-        username: daCaptainName,
+        email: `${daCaptainName}@example.com`,
         name: daCaptainName,
         passwordHash: '',
       })
@@ -493,7 +493,7 @@ describe('Groups API', () => {
               variables: {
                 captainId: (
                   await UserAccount.findOne({
-                    where: { username: captainName },
+                    where: { email: `${captainName}@example.com` },
                   })
                 )?.id,
               },
@@ -533,7 +533,7 @@ describe('Groups API', () => {
               variables: {
                 captainId: (
                   await UserAccount.findOne({
-                    where: { username: captainName },
+                    where: { email: `${captainName}@example.com` },
                   })
                 )?.id,
                 groupType: groupTypes,
@@ -547,7 +547,10 @@ describe('Groups API', () => {
                 })
               )
                 .filter(({ name }) => expectedGroupNames.includes(name))
-                .filter(({ captain }) => captain.username === captainName)
+                .filter(
+                  ({ captain }) =>
+                    captain.email === `${captainName}@example.com`,
+                )
                 .map(toGroupData),
             )
           },
diff --git a/src/tests/helpers/index.ts b/src/tests/helpers/index.ts
index 3a8f625cf..19e871d73 100644
--- a/src/tests/helpers/index.ts
+++ b/src/tests/helpers/index.ts
@@ -10,7 +10,7 @@ import {
   ShipmentCreateInput,
 } from '../../server-internal-types'
 
-let fakeusername = 1
+let fakeUserCounter = 1
 
 async function createGroup(
   input: GroupCreateInput,
@@ -18,7 +18,7 @@ async function createGroup(
 ): Promise<Group> {
   if (!captainId) {
     const groupCaptain = await UserAccount.create({
-      username: `fake-auth-id-${fakeusername++}`,
+      email: `fake-auth-id-${fakeUserCounter++}@example.com`,
       passwordHash: '',
       name: 'Captain',
     })
diff --git a/src/tests/line_items_api.test.ts b/src/tests/line_items_api.test.ts
index 2ce641c99..c55008e48 100644
--- a/src/tests/line_items_api.test.ts
+++ b/src/tests/line_items_api.test.ts
@@ -37,7 +37,7 @@ describe('LineItems API', () => {
     await sequelize.sync({ force: true })
 
     captain = await UserAccount.create({
-      username: 'captain',
+      email: 'captain@example.com',
       passwordHash: '',
       name: 'Captain',
     })
diff --git a/src/tests/offers_api.test.ts b/src/tests/offers_api.test.ts
index 81c207008..177e7bd88 100644
--- a/src/tests/offers_api.test.ts
+++ b/src/tests/offers_api.test.ts
@@ -34,7 +34,7 @@ describe('Offers API', () => {
     await Shipment.truncate({ cascade: true, force: true })
 
     captain = await UserAccount.create({
-      username: 'captain',
+      email: 'captain@example.com',
       passwordHash: '',
       name: 'Captain',
     })
diff --git a/src/tests/pallets_api.test.ts b/src/tests/pallets_api.test.ts
index 9906902e4..06d2ba877 100644
--- a/src/tests/pallets_api.test.ts
+++ b/src/tests/pallets_api.test.ts
@@ -40,7 +40,7 @@ describe('Pallets API', () => {
     await Pallet.truncate({ cascade: true, force: true })
 
     captain = await UserAccount.create({
-      username: 'captain',
+      email: 'captain@example.com',
       passwordHash: '',
       name: 'Captain',
     })
diff --git a/src/tests/shipment_exports_api.test.ts b/src/tests/shipment_exports_api.test.ts
index 054ddf973..10b254fa1 100644
--- a/src/tests/shipment_exports_api.test.ts
+++ b/src/tests/shipment_exports_api.test.ts
@@ -38,7 +38,7 @@ describe('ShipmentExports API', () => {
     await sequelize.sync({ force: true })
 
     captain = await UserAccount.create({
-      username: 'captain',
+      email: 'captain@example.com',
       passwordHash: '',
       name: 'Captain',
     })