Saving token to local storage

cmd/api/handlers-api.go

@@ -2,10 +2,12 @@ package main
 
 import (
 	"encoding/json"
+	"fmt"
 	"myapp/internal/cards"
 	"myapp/internal/models"
 	"net/http"
 	"strconv"
+	"time"
 
 	"github.com/go-chi/chi/v5"
 	"github.com/stripe/stripe-go/v79"
@@ -266,16 +268,32 @@ func (app *application) CreateAuthToken(w http.ResponseWriter, r *http.Request)
 	}
 
 	// generate the token
+	token, err := models.GenerateToken(user.ID, 24*time.Hour, models.ScopeAuthentication)
+	if err != nil {
+		app.errorLog.Println(err)
+		app.badRequest(w, r, err)
+		return
+	}
+
+	// save to DB
+	err = app.DB.InsertToken(token, user)
+	if err != nil {
+		app.errorLog.Println(err)
+		app.badRequest(w, r, err)
+		return
+	}
 
 	// send response
 
 	var payload struct {
-		Error   bool   `json:"error"`
-		Message string `json:"message"`
+		Error   bool          `json:"error"`
+		Message string        `json:"message"`
+		Token   *models.Token `json:"authentication_token"`
 	}
 
 	payload.Error = false
-	payload.Message = "Success!"
+	payload.Message = fmt.Sprintf("token for %s created", userInput.Email)
+	payload.Token = token
 
 	_ = app.writeJSON(w, http.StatusOK, payload)
 }

cmd/web/templates/login.page.gohtml

@@ -3,42 +3,47 @@
 Login
 {{ end }}
 {{ define "content" }}
-<form action=""
-      method="post"
-      name="login-form"
-      id="login-form"
-      class="d-blick needs-validation col-sm-6"
-      autocomplete="off"
-      novalidate="">
-    <h2 class="mt-2 mb-3 text-center">Login</h2>
-    <hr>
-    <div class="mb-3">
-        <label for="-email" class="form-label">Email</label>
-        <input type="text"
-               id="email"
-               name="email"
-               autocomplete="email-new"
-               required=""
-               class="form-control">
+<div class="row">
+    <div class="col-md-6 offset-md-3">
+        <div class="alert alert-danger text-center d-none" id="login-messages"></div>
+        <form action=""
+              method="post"
+              name="login-form"
+              id="login-form"
+              class="d-blick needs-validation"
+              autocomplete="off"
+              novalidate="">
+            <h2 class="mt-2 mb-3 text-center">Login</h2>
+            <hr>
+            <div class="mb-3">
+                <label for="-email" class="form-label">Email</label>
+                <input type="text"
+                       id="email"
+                       name="email"
+                       autocomplete="email-new"
+                       required=""
+                       class="form-control">
+            </div>
+            <div class="mb-3">
+                <label for="password" class="form-label">Password</label>
+                <input type="password"
+                       id="password"
+                       name="password"
+                       autocomplete="password-new"
+                       required=""
+                       class="form-control">
+            </div>
+            <hr>
+            <a href="javascript:void(0)" id="login-btn" class="btn btn-primary">Login</a>
+        </form>
     </div>
-    <div class="mb-3">
-        <label for="password" class="form-label">Password</label>
-        <input type="password"
-               id="password"
-               name="password"
-               autocomplete="password-new"
-               required=""
-               class="form-control">
-    </div>
-    <hr>
-    <a href="javascript:void(0)" id="login-btn" class="btn btn-primary">Login</a>
-</form>
+</div>
 {{ end }}
-{{define "js"}}
+{{ define "js" }}
 <script type="module">
     import {val} from "/static/js/login.js"
     document.getElementById("login-btn").addEventListener("click", () => {
         val({{.API}});
     })
 </script>
-{{end}}
+{{ end }}

internal/models/tokens.go

@@ -0,0 +1,73 @@
+package models
+
+import (
+	"context"
+	"crypto/rand"
+	"crypto/sha256"
+	"encoding/base32"
+	"time"
+)
+
+const (
+	ScopeAuthentication = "authentication"
+)
+
+// Token is the type for authentication tokens
+type Token struct {
+	PlainText string    `json:"token"`
+	UserID    int64     `json:"-"`
+	Hash      []byte    `json:"-"`
+	Expiry    time.Time `json:"expiry"`
+	Scope     string    `json:"-"`
+}
+
+// GenerateToken Generates a token that lasts for ttl, and returns it
+func GenerateToken(userID int, ttl time.Duration, scope string) (*Token, error) {
+	token := &Token{
+		UserID: int64(userID),
+		Expiry: time.Now().Add(ttl),
+		Scope:  scope,
+	}
+
+	randomBytes := make([]byte, 16)
+	_, err := rand.Read(randomBytes)
+	if err != nil {
+		return nil, err
+	}
+
+	token.PlainText = base32.StdEncoding.WithPadding((base32.NoPadding)).
+		EncodeToString((randomBytes))
+	hash := sha256.Sum256([]byte(token.PlainText))
+	token.Hash = hash[:]
+	return token, nil
+}
+
+func (m *DBModel) InsertToken(t *Token, u User) error {
+	ctx, cancel := context.WithTimeout(context.Background(), 3*time.Second)
+	defer cancel()
+
+	// delete existing tokens
+	stmt := `DELETE FROM tokens WHERE user_id = ?`
+
+	_, err := m.DB.ExecContext(ctx, stmt, u.ID)
+	if err != nil {
+		return err
+	}
+
+	stmt = `INSERT INTO tokens
+             (user_id, name, email, token_hash, created_at, updated_at)
+             VALUES (?, ?, ?, ?, ?, ?)`
+
+	_, err = m.DB.ExecContext(ctx, stmt,
+		u.ID,
+		u.LastName,
+		u.Email,
+		t.Hash,
+		time.Now(),
+		time.Now(),
+	)
+	if err != nil {
+		return err
+	}
+	return nil
+}

migrations/20240813194454_create_tokens_table.down.fizz

@@ -0,0 +1,2 @@
+drop_table("tokens")
+

migrations/20240813194454_create_tokens_table.up.fizz

@@ -0,0 +1,11 @@
+create_table("tokens") {
+    t.Column("id", "integer", {primary: true})
+    t.Column("user_id", "integer", {"unsigned": true})
+    t.Column("name", "string", {"size": 255})
+    t.Column("email", "string", {})
+    t.Column("token_hash", "string", {})
+}
+
+sql("ALTER TABLE tokens MODIFY token_hash varbinary(255);")
+sql("ALTER TABLE tokens ALTER COLUMN created_at SET DEFAULT now();")
+sql("ALTER TABLE tokens ALTER COLUMN updated_at SET DEFAULT now();")

static/js/common.js

@@ -1,6 +1,5 @@
 export let card;
 export let stripe;
-const cardMessages = document.getElementById("card-messages");
 const payButton = document.getElementById("pay-button");
 export const processing = document.getElementById("processing-payment");
 
@@ -14,18 +13,20 @@ export function showPayButton() {
     processing.classList.add("d-none");
 }
 
-export function showCardError(msg) {
-    cardMessages.classList.add("alert-danger");
-    cardMessages.classList.remove("alert-success");
-    cardMessages.classList.remove("d-none");
-    cardMessages.innerText = msg;
+export function showError(element, msg) {
+    const messages = document.getElementById(element);
+    messages.classList.add("alert-danger");
+    messages.classList.remove("alert-success");
+    messages.classList.remove("d-none");
+    messages.innerText = msg;
 }
 
-export function showCardSuccess() {
-    cardMessages.classList.add("alert-success");
-    cardMessages.classList.remove("alert-danger");
-    cardMessages.classList.remove("d-none");
-    cardMessages.innerText = "Trasaction successful";
+export function showSuccess(element, msg) {
+    const messages = document.getElementById(element);
+    messages.classList.add("alert-success");
+    messages.classList.remove("alert-danger");
+    messages.classList.remove("d-none");
+    messages.innerText = msg;
 }
 
 export function stripeInit(pubKey) {

static/js/login.js

@@ -1,3 +1,8 @@
+import {
+    showError,
+    showSuccess,
+} from './common.js';
+
 export function val(api) {
     let form = document.getElementById("login-form");
 
@@ -27,6 +32,13 @@ export function val(api) {
         .then(response => response.json())
         .then(response => {
             console.log(response)
+            if (response.error === false) {
+                localStorage.setItem("token", response.authentication_token.token);
+                localStorage.setItem("token_expiry", response.authentication_token.expiry);
+                showSuccess("login-messages", "Login successful.")
+            } else {
+                showError("login-messages", response.message)
+            }
         });
 }
 

static/js/stripe-plan.js

@@ -1,8 +1,8 @@
 import {
     hidePayButton,
     showPayButton,
-    showCardError,
-    showCardSuccess,
+    showError,
+    showSuccess,
     stripe,
     card,
     processing,
@@ -35,7 +35,7 @@ export function val(plan_id, api) {
 
 function stripePaymentMethodHandler(result, plan_id, api) {
     if (result.error) {
-        showCardError(result.error.message);
+        showError("card-messages", result.error.message);
     } else {
         // create a customer and subscribe to plan
         let payload = {
@@ -66,7 +66,7 @@ function stripePaymentMethodHandler(result, plan_id, api) {
             .then(function (data) {
                 console.log(data);
                 processing.classList.add("d-none");
-                showCardSuccess();
+                showSuccess("card-messages", "Transaction successful!");
                 sessionStorage.first_name = document.getElementById("first-name").value;
                 sessionStorage.last_name = document.getElementById("last-name").value;
                 sessionStorage.amount = document.getElementById("amount").value;

static/js/stripe.js

@@ -1,8 +1,8 @@
 import {
     hidePayButton,
     showPayButton,
-    showCardError,
-    showCardSuccess,
+    showError,
+    showSuccess,
     stripe,
     card,
     processing,
@@ -52,7 +52,7 @@ export function val(api) {
                 }).then(function (result) {
                     if (result.error) {
                         // card declined, or sth went wrong with the card
-                        showCardError(result.error.message);
+                        showError("card-messages", result.error.message);
                         showPayButton();
                     } else if (result.paymentIntent) {
                         if (result.paymentIntent.status === "succeeded") {
@@ -62,7 +62,7 @@ export function val(api) {
                             document.getElementById("payment_amount").value = result.paymentIntent.amount;
                             document.getElementById("payment_currency").value = result.paymentIntent.currency;
                             processing.classList.add("d-none");
-                            showCardSuccess();
+                            showSuccess("card-messages", "Trasaction successful!");
                             document.getElementById("charge_form").submit();
                         }
                     }