Sure! Here's the documentation formatted in Markdown for a GitHub README file. If you have the template, start at line 106.
# Repl Auth Template
This Repl Auth Template provides a simple way to handle user authentication and redirection using Replit's infrastructure. It includes an Express.js server and a basic HTML login page. Users are redirected to a personalized home page upon successful authentication.
## File Structure
ReplAuth-Template/ ├── public/ │ ├── login.html ├── index.js ├── package.json ├── package-lock.json
## Files
### `public/login.html`
```html
<!DOCTYPE html>
<html>
<head>
<title>Repl Auth Template</title>
</head>
<body>
<h1>Please login to view the home page.</h1>
<script
authed="location.reload()"
src="https://auth.turbio.repl.co/script.js">
</script>
</body>
</html>
const express = require('express'); // Import Express.js
const app = express();
app.use(express.static('public')); // Serve static files from the 'public' directory
// Root route
app.get('/', function (req, res) {
if (req.header('X-Replit-User-Id')) { // Check if the user is logged in
res.redirect(`/home/?user=${req.header('X-Replit-User-Name')}`); // Redirect to home page with user name as query parameter
} else {
res.sendFile(__dirname + '/public/login.html'); // Send login page if user is not logged in
}
});
// Home route
app.get('/home', function (req, res) {
if (!req.query.user) { // Ensure user parameter is present
res.redirect('/'); // Redirect to login if user parameter is missing
} else {
res.send(`<h1>Hello, ${req.query.user}</h1>`); // Send a personalized greeting to the user
}
});
// Start the server on port 8080
app.listen(8080, function () {
console.log('Server up!');
});{
"name": "repl-auth-template",
"version": "1.0.0",
"description": "A simple authentication template using Repl Auth",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"dependencies": {
"express": "^4.17.1"
},
"author": "",
"license": "ISC"
}-
Create a New Replit Project:
- Go to Replit and create a new Repl using the Node.js template.
-
Set Up the Project Structure:
- Create the necessary directories and files as described above.
-
Add the HTML Login Page:
- Create a file
public/login.htmlwith the content provided in thepublic/login.htmlsection.
- Create a file
-
Add the Server Script:
- Create a file
index.jswith the content provided in theindex.jssection.
- Create a file
-
Add the Package Configuration:
- Create a file
package.jsonwith the content provided in thepackage.jsonsection.
- Create a file
-
Install Dependencies:
- Open the Replit shell and run
npm installto install the Express.js dependency.
- Open the Replit shell and run
-
Configure Your Replit Project:
- Ensure your project is set to run
npm startto start the server.
- Ensure your project is set to run
-
Run the Application:
- Click the "Run" button in Replit to start the server.
-
Test the Application:
- Open the provided Replit URL to test the application.
-
Set Redirect URL in Your App:
- Use the Replit URL as the redirect URL in your application configuration. For example:
https://your-repl-username.your-repl-name.repl.co/
- Use the Replit URL as the redirect URL in your application configuration. For example:
-
Login Page:
- When a user visits the root URL, they are served the login page (
public/login.html). - The login page includes a script that handles authentication and reloads the page upon successful authentication.
- When a user visits the root URL, they are served the login page (
-
Authentication Handling:
- The server checks for the presence of the
X-Replit-User-Idheader to determine if a user is logged in. - If the user is logged in, they are redirected to the home page with their username passed as a query parameter.
- If the user is not logged in, they are served the login page.
- The server checks for the presence of the
-
Home Page:
- The home page (
/home) displays a personalized greeting using the username passed as a query parameter. - If the user parameter is missing, the server redirects back to the login page.
- The home page (
If you plan to deploy this to a live server, ensure that your server is configured to handle SSL (HTTPS) and that the redirect URLs in your apps are updated to use the live server's URL.
For example, if deploying to Heroku, the redirect URL might be:
https://your-app-name.herokuapp.com/
By following these steps, you can use this template to handle authentication and redirection for your apps on Replit, ensuring a seamless authentication flow for your users.
This Markdown file can be saved as `README.md` in your project root directory and will serve as documentation for anyone using your Repl Auth Template.