diff --git a/webclient/src/App.js b/webclient/src/App.js
index 504d5e4..2cdb843 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -219,7 +219,7 @@ function App() {
 							</Route>
 
 							<Route path='/cards'>
-								<Cards user={user} />
+								<Cards token={token} user={user} />
 							</Route>
 
 							<Route path='/training'>
diff --git a/webclient/src/Cards.js b/webclient/src/Cards.js
index ce85f6f..1d1195b 100644
--- a/webclient/src/Cards.js
+++ b/webclient/src/Cards.js
@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
-import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import { BasicTable, requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 
 export function Cards(props) {
-	const { user } = props;
+	const { user, token } = props;
+	const [open, setOpen] = useState(false);
 
 	const cardStatus = (c) => c.active_status === 'card_active' ? 'Yes' : 'No';
 	const card = user.cards[0];
@@ -65,22 +66,66 @@ export function Cards(props) {
 				<p>No cards yet! Ask a director for one after you are vetted.</p>
 			}
 
-			{!!user.door_code && <div>
+			{!!user.door_code && <React.Fragment>
 				<Header size='medium'>Door Alarm Code</Header>
 
 				<p>Only share this with vetted Protospace members:</p>
 
 				<p>{user.door_code}</p>
-			</div>}
+			</React.Fragment>}
 
-			{!!user.wifi_pass && <div>
-				<p />
+			{!!user.wifi_pass && <React.Fragment>
 				<Header size='medium'>Wi-Fi Password</Header>
 
 				<p>Only share this with Protospace members and guests:</p>
 
 				<p>{user.wifi_pass}</p>
-			</div>}
+			</React.Fragment>}
+
+			<Header size='medium'>API Key</Header>
+
+			<p>Don't share this with anyone! Treat it like your password:</p>
+
+			{open ?
+				<React.Fragment>
+					<p>{token}</p>
+
+					<Header size='small'>API Docs</Header>
+
+					<p>
+						To learn how to use this, refer to the API docs:
+						<br />
+						<a href='https://docs.my.protospace.ca/api.html' target='_blank' rel='noopener noreferrer' aria-label='link to our API docs'>
+							https://docs.my.protospace.ca/api.html
+						</a>
+					</p>
+
+					<Header size='small'>API Examples</Header>
+
+					<p>Get your user info with Bash (curl):</p>
+
+					<p><code>$ curl -H "Authorization: Token {token}" https://api.my.protospace.ca/user/</code></p>
+
+					<p>Get your user info with Python 3 (and requests):</p>
+
+					<code>
+						import json, requests<br/>
+						<br />
+						SECRET_API_KEY = '{token}'<br />
+						<br />
+						headers = {'{'}'Authorization': 'Token '+SECRET_API_KEY{'}'}<br />
+						r = requests.get('https://api.my.protospace.ca/user/', headers=headers)<br />
+						<br />
+						print(json.dumps(r.json(), indent=4))<br />
+					</code>
+				</React.Fragment>
+			:
+				<p>
+					<Button onClick={() => setOpen(true)}>
+						Show Secret
+					</Button>
+				</p>
+			}
 		</Container>
 	);
 };