we are trying to use firebase authentication with phoenix framework, but we failed to pass the session cookie to the browser, using Guardian library.
login page:
<form id="login">
<label>Email</label>
<input type="text" name="email">
<label>Password</label>
<input type="password" name="password">
<button type="submit">Log in</button>
</form>
<script>
window.addEventListener("DOMContentLoaded", () => {
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.NONE);
document
.getElementById("login")
.addEventListener("submit", (event) => {
event.preventDefault();
const email = event.target.email.value;
const password = event.target.password.value;
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(({ user }) => {
console.log(user)
return user.getIdToken().then((idToken) => {
return fetch("/api/sessionlogin", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"CSRF-Token": Cookies.get("XSRF-TOKEN")
},
body: JSON.stringify({ idToken }),
});
});
})
.then(() => {
return firebase.auth().signOut();
})
.then(() => {
window.location.assign("/dashboard");
});
return false;
});
});
</script>
controller:
def session_login(conn, %{"idToken" => token}) do
{:ok, claims} = ExFirebaseAuth.Token.verify_token(token)
conn
|> Guardian.Plug.sign_in(claims)
|> json(%{state: "success"})
end
pipeline:
defmodule FB.Auth.Pipeline do
use Guardian.Plug.Pipeline,
otp_app: :fb,
error_handler: FB.Auth.ErrorHandler,
module: FB.Auth.Guardian
plug Guardian.Plug.VerifySession, claims: %{"typ" => "access"}
plug Guardian.Plug.VerifyHeader, claims: %{"typ" => "access"}
plug Guardian.Plug.LoadResource, allow_blank: true
end
router:
pipeline :browser do
plug :accepts, ["html"]
plug :fetch_session
plug :fetch_flash
plug :protect_from_forgery
plug :put_secure_browser_headers
end
pipeline :api do
plug :accepts, ["json"]
end
pipeline :auth do
plug FB.Auth.Pipeline
end
scope "/", FBWeb do
pipe_through [:browser]
get "/", PageController, :index
post "/logout", PageController, :logout
end
scope "/", FBWeb do
pipe_through [:browser, :auth]
get "/dashboard", PageController, :dashboard
end
scope "/api", FBWeb do
pipe_through [:api]
post "/sessionlogin", PageController, :session_login
end
