diff --git a/frontend/src/contexts/userContext.ts b/frontend/src/contexts/userContext.ts
index a6b333b941f8b005d5c8e23e183721cdaf1e9eb2..8ff5841d6307fee2dbad807183190a8edfe53909 100644
--- a/frontend/src/contexts/userContext.ts
+++ b/frontend/src/contexts/userContext.ts
@@ -2,7 +2,8 @@ import { createContext, useContext } from 'react'
 
 interface User {
   auth: boolean
-  name: string
+  first_name: string
+  last_name: string
 }
 
 interface IUserContext {
@@ -14,7 +15,7 @@ interface IUserContext {
 function noop() {}
 
 export const UserContext = createContext<IUserContext>({
-  user: { auth: false, name: '' },
+  user: { auth: false, first_name: '', last_name: '' },
   fetchUserInfo: noop,
   clearUserInfo: noop,
 })
diff --git a/frontend/src/providers/userProvider.tsx b/frontend/src/providers/userProvider.tsx
index 4f1ee7e957f617bbcdb08466c264a6602f6dbc1f..f9c3cca49151979ff8e449df543aa33ef37f882d 100644
--- a/frontend/src/providers/userProvider.tsx
+++ b/frontend/src/providers/userProvider.tsx
@@ -8,7 +8,11 @@ type UserProviderProps = {
 
 function UserProvider(props: UserProviderProps) {
   const { children } = props
-  const [user, setUser] = useState({ auth: false, name: '' })
+  const [user, setUser] = useState({
+    auth: false,
+    first_name: '',
+    last_name: '',
+  })
   const [fetching, setFetching] = useState(false)
 
   const getUserInfo = async () => {
@@ -17,7 +21,11 @@ function UserProvider(props: UserProviderProps) {
       const data = await response.json()
 
       if (response.ok) {
-        setUser({ auth: true, name: data.name })
+        setUser({
+          auth: true,
+          first_name: data.first_name,
+          last_name: data.last_name,
+        })
       }
     } catch (error) {
       // Do nothing
@@ -33,7 +41,7 @@ function UserProvider(props: UserProviderProps) {
   }
 
   const clearUserInfo = () => {
-    setUser({ auth: false, name: '' })
+    setUser({ auth: false, first_name: '', last_name: '' })
   }
 
   return (
diff --git a/frontend/src/routes/components/userInfo.tsx b/frontend/src/routes/components/userInfo.tsx
index 567c46042eb87f5a3b2b37718c401e595eb6a46d..0c153a3db79105b0fb39a4739d2b8bba2161558a 100644
--- a/frontend/src/routes/components/userInfo.tsx
+++ b/frontend/src/routes/components/userInfo.tsx
@@ -10,7 +10,11 @@ function UserInfo() {
   }, [])
 
   if (user.auth) {
-    return <div>{user.name}</div>
+    return (
+      <div>
+        {user.first_name} {user.last_name}
+      </div>
+    )
   }
   return <></>
 }
diff --git a/frontend/src/routes/frontpage/index.tsx b/frontend/src/routes/frontpage/index.tsx
index 4435a89a109d314fe9ef531107db7d0a248eb4a4..7985d124df92355bc848c660ba43edf67d5b5291 100644
--- a/frontend/src/routes/frontpage/index.tsx
+++ b/frontend/src/routes/frontpage/index.tsx
@@ -14,7 +14,9 @@ export default function FrontPage() {
       <Page>
         <p>
           <strong>Routes</strong>
-          <p>{user.name}</p>
+          <p>
+            {user.first_name} {user.last_name}
+          </p>
           <ul>
             <li>
               <Link to="/">Front page</Link>
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 4504a47c82c6535cc1617c474ad40cc74bab1484..43dc8f15efd67761a161b088f58e6e505b135054 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -10,7 +10,8 @@ import { useUserContext } from 'contexts'
 import Sponsor from 'routes/sponsor'
 import Register from 'routes/register'
 import FrontPage from 'routes/frontpage'
-
+import Invite from 'routes/invite'
+import InviteLink from 'routes/invitelink'
 import Footer from 'routes/components/footer'
 import Header from 'routes/components/header'
 import NotFound from 'routes/components/notFound'
@@ -44,15 +45,17 @@ export default function App() {
       <AppWrapper>
         <Header />
         <Switch>
-          <Route exact path='/'>
+          <Route exact path="/">
             <FrontPage />
           </Route>
-          <ProtectedRoute path='/sponsor'>
+          <ProtectedRoute path="/sponsor">
             <Sponsor />
           </ProtectedRoute>
-          <Route path='/register'>
+          <Route path="/register">
             <Register />
           </Route>
+          <Route path="/invite/:id" component={InviteLink} />
+          <Route path="/invite/" component={Invite} />
           <Route>
             <NotFound />
           </Route>
diff --git a/frontend/src/routes/invite/index.tsx b/frontend/src/routes/invite/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6d44123163867ae9b567e21122f7e23ce21dc167
--- /dev/null
+++ b/frontend/src/routes/invite/index.tsx
@@ -0,0 +1,18 @@
+import Page from 'components/page'
+import { useUserContext } from 'contexts'
+
+function Invite() {
+  const { user } = useUserContext()
+
+  return (
+    <Page>
+      <p>
+        {user.first_name} {user.last_name}
+        TODO: Put information about login options, and buttons to them on this
+        page
+      </p>
+    </Page>
+  )
+}
+
+export default Invite
diff --git a/frontend/src/routes/invitelink/index.tsx b/frontend/src/routes/invitelink/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2a34ff22055b6c781a37d5bd754eafab13d8c3f7
--- /dev/null
+++ b/frontend/src/routes/invitelink/index.tsx
@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+import { Redirect, RouteComponentProps } from 'react-router-dom'
+
+type TParams = { id: string }
+
+function InviteLink({ match }: RouteComponentProps<TParams>) {
+  // Fetch backend endpoint to preserve invite_id in backend session then redirect
+  // to generic invite page with info about feide login or manual with passport.
+
+  const inviteId = match.params.id
+
+  useEffect(() => {
+    fetch(`/api/ui/v1/invited/${inviteId}`)
+  }, [])
+  return <Redirect to="/invite" />
+}
+
+export default InviteLink